Explain in detail the method of translating and rotating pictures through HTML5 canvas

Time:2021-7-29

Translate ()
Translation transformation, hence the name Si Yi, is a general graphic displacement. For example, here I want to translate the rectangle at (100100) to (200200). Then I just need to add context. Translate (100100) before drawing the rectangle.

Here, translate () only passes in two parameters, which are actually the coordinates of the origin of the new canvas coordinate system. Let’s combine the code to see the effect.

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <html lang=“zh”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title>Translation transformation</title>  
  6.     <style>  
  7.         body { background: url(“./images/bg3.jpg”) repeat; }   
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <div id=“canvas-warp”>  
  13.     <canvas id=“canvas”>  
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>  
  16. </div>  
  17.   
  18. <script>  
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = “#00AAAA”;   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = “red”;   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.     };   
  35. </script>  
  36. </body>  
  37. </html>  

Operation results:
2016322112903186.jpg (850×500)

The blue rectangle is the original position of the rectangle. Then we call the translate () method to move the rectangle to (200200), that is, the position of the red rectangle. Let’s use a graph to see how it does translation transformation.
2016322112934958.jpg (850×500)

Yes, in fact, the translation transformation here is actually in the translation coordinate system, and the parameter passed in to translate() is actually the origin of the new coordinate system relative to the old coordinate system. This makes the red rectangle drawn in (100100) change to (200200) after translating the coordinate system.

Note: save the usage status:
In fact, there is a pit here. What if we want to translate the rectangle to (300, 300)? We may think that we can call context. Translate (200200) directly. OK, let’s see the effect.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > translation transformation < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = “#00AAAA”;   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = “red”;   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.         context.fillStyle = “green”;   
  35.         context.translate(200,200);   
  36.         context.fillRect(100,100,200,100);   
  37.   
  38.     };   
  39. </script>   
  40. </body>   
  41. </html>  

Operation results:
2016322113015232.jpg (850×500)

The green rectangle here is not at (300, 300) as we expected, but at (400, 400). Why? You must already know the answer – canvas is a state based drawing. After our first translation, the coordinate system is already at (100100), so if we continue to translate, we will continue to translate the coordinate system based on the new coordinate system. So how to solve it? It’s simple. There are two ways.

First, after each transformation, remember to translate the coordinate system back to the origin, that is, call translate (- x, – y).

Second, use context. Save () before each translation and context. Restore () after each drawing.

Remember, don’t think that I will continue to translate (100100) immediately after the first translation. In this way, your own coordinate system will be chaotic. You can’t find the origin of your own coordinate system at all. After many transformations or encapsulating functions, you will be killed. Therefore, we must take the initial state as the most fundamental reference, which is a matter of principle. Here I suggest using the second method, and when it comes to all graphic transformations, it should be handled in this way, not just translation transformation.

The specific use is as follows.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > translation transformation < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = “#00AAAA”;   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.save();   
  31.         context.fillStyle = “red”;   
  32.         context.translate(100,100);   
  33.         context.fillRect(100,100,200,100);   
  34.         context.restore();   
  35.   
  36.         context.save();   
  37.         context.fillStyle = “green”;   
  38.         context.translate(200,200);   
  39.         context.fillRect(100,100,200,100);   
  40.         context.restore();   
  41.   
  42.     };   
  43. </script>   
  44. </body>   
  45. </html>  

Operation results:
2016322113053867.jpg (850×500)

Therefore, when using graphic transformation, remember to use state saving in combination.

Rotate transform

Like drawing an arc, the parameter passed in by rotate (DEG) here is radian, not angle. At the same time, it should be noted that this rotation is clockwise with the origin (0, 0) of the coordinate system as the center. Therefore, before using rotate (), you usually need to use translate () to translate the coordinate system and determine the center of the rotation. That is, the rotation transform is usually used in conjunction with the translation transform.

Finally, it should be noted that canvas is drawn based on state, so each rotation is continued based on the last rotation. Therefore, when using graphic transformation, save() and restore() methods must be combined to reset the rotation angle on the one hand and the origin of the coordinate system on the other.

JavaScript CodeCopy contents to clipboard
  1. <!DOCTYPE html>   
  2. <html lang=“zh”>   
  3. <head>   
  4.     <meta charset=“UTF-8”>   
  5. < title > rotation transformation < / Title >
  6.     <style>   
  7.         body { background: url(“./images/bg3.jpg”) repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id=“canvas-warp”>   
  13.     <canvas id=“canvas”>   
  14. Your browser doesn’t support canvas?! Change one quickly!!
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById(“canvas”);   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext(“2d”);   
  24.         context.fillStyle = “#FFF”;   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.   
  28.         for(var i = 0; i <= 12; i++){   
  29.             context.save();   
  30.             context.translate(70 + i * 50, 50 + i * 40);   
  31.             context.fillStyle = “#00AAAA”;   
  32.             context.fillRect(0,0,20,20);   
  33.             context.restore();   
  34.   
  35.             context.save();   
  36.             context.translate(70 + i * 50, 50 + i * 40);   
  37.             context.rotate(i * 30 * Math.PI / 180);   
  38.             context.fillStyle = “red”;   
  39.             context.fillRect(0,0,20,20);   
  40.             context.restore();   
  41.         }   
  42.   
  43.     };   
  44. </script>   
  45. </body>   
  46. </html>  

Operation results:
2016322113132491.jpg (850×500)

Here, 14 pairs of squares are drawn with the for loop, of which blue is the square before rotation and red is the square after rotation. Each rotation takes the vertex at the upper left corner of the square as the origin. Each drawing is wrapped by save() and restore(), and the coordinate system is moved before each rotation. Children’s shoes can do it by themselves, practice it, and you can experience the mystery of rotation and transformation.

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]