The canvas drawing environment is changed by translate (), scale (), rotate (), SetTransform (), and transform (), which affect the transformation matrix of the canvas.
| Function | Method | Describe |
| Translate | Dx,dx | The X and Y size of the converted Amount |
| Scale | Sx,sy | Scale factor for horizontal and vertical |
| Rotate | Angle | The amount of rotation, expressed in radians. Positive values are rotated clockwise, and negative values rotate in a counterclockwise direction. |
| SetTransform | A,b,c,d,e,f | Horizontal scaling, horizontal tilt (related to rotation), vertical tilt (related to rotation,-horizontal tilt), vertical scaling, horizontal movement, vertical movement |
| Transform | A,b,c,d,e,f | Horizontal scaling, horizontal tilt, vertical tilt, vertical scaling, horizontal movement, vertical movement |
The translate () method adds a horizontal and vertical offset to the transformation matrix of the canvas. The parameters dx and dy are added to all points in the subsequent definition path.
The scale () method adds a scaling transformation to the current transformation matrix of the canvas. Scaling is done with independent horizontal and vertical scaling factors. For example, passing a value of 2.0 and 0.5 will cause the drawing path width to become twice times the original and the height to be 1/2. Specifying a negative SX value causes the x-coordinate to be folded in half along the y-axis, while specifying a negative sy causes the y-coordinate to fold along the X-axis.
The rotate () method changes the mapping between the canvas coordinates and the pixels of the <Canvas> element in the Web browser by specifying an angle, so that any subsequent drawing appears rotated in the canvas. It does not rotate the <Canvas> element itself. Note that this angle is specified in radians.
SetTransform () resets the current transformation matrix to the unit matrix, and then constructs a new matrix.
Transform () adds a new transformation matrix, draws the rectangle again, and when called transform (), it is built on the previous transformation matrix.
Specific usage examplesWe draw a rectangle on the canvas.
1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 5 <CanvasID= "MyCanvas"width= "+"Height= "Max"style= "border:1px solid #d3d3d3;">6 Your Browser does not support the HTML5 canvas tag.7 </Canvas>8 9 <Script>Ten One varC=document.getElementById ("MyCanvas"); A varCTX=C.getcontext ("2d"); - - Ctx.fillstyle="Yellow"; the Ctx.fillrect (0,0, -, -) - - </Script> - + </Body> - </HTML>
Then the drawing is as follows: The drawing range is the beginning of the coordinates (0,0) to draw a rectangle with a width height of 250,100 respectively.
This rectangle is translated, scaled, rotated, and so on.
1 panningIf you pan in the middle, we can change its coordinate values such as Ctx.fillrect (25,25,250,100), and move the starting position of the rectangle to (25,25). The results are drawn as follows:
There is another way that we can move the canvas through the translate method of the context to achieve the same visual effect. The original point of the canvas before transformation is in the upper-left corner, and the translate method is used to translate the entire coordinate system.
Note: When manipulating the canvas transformation matrix, it is best to use the Save method before the transformation to save the current state of the recording canvas, and then use the Restore method to restore the matrix State before the transformation.
2 Scaling1 Ctx.save (); 2 ctx.translate (25,25); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (0,0,250,100)5 ctx.restore ();
Scaling the rectangle can of course be done by adjusting the width of the method no longer illustrated here.
This article mainly introduces the method of scaling the canvas by the scale method of the context, which reduces the yellow rectangle to half the original (e.g.) by the following code.
3 rotation1 Ctx.save (); 2 Ctx.scale (0.5,0.5); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (25,25,250,100); 5 Ctx.restore ();
To rotate a rectangle in a diagram, you need to transform the state of the canvas matrix through the Rotate method. Rotate (MATH.PI/6) is to rotate the canvas clockwise by 30 degrees, drawing a rectangle like.
4 Determining the center point1 Ctx.save (); 2 ctx.rotate (MATH.PI/6); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (25,25,250,100)5 ctx.restore ();
The graph shows that the above scaling and rotation are centered on the top left corner of the canvas, and if we need to transform it centered on the center of the canvas, we need to fix the canvas's coordinate origin position to the center of the canvas placeholder at the rotate and scale method call Ranslate (WIDTH/2, HEIGHT/2), then perform a scaling transformation, and then use Ranslate (-WIDTH/2,-HEIGHT/2) to correct the coordinate system. The following code:
1 Ctx.save (); 2 ctx.translate (WIDTH/2,HEIGHT/2); // move the canvas coordinate system origin to the center 3 ctx.rotate (0.5,0.5); // in the case of scaling, here is the scaling code 4 ctx.translate (-WIDTH/2,-HEIGHT/2); // correcting the canvas coordinate system 5 ctx.fillstyle= "Yellow"; 6 ctx.fillrect (25,25,250,100)7 ctx.restore ();
Effects such as:
5 Setting up the matrixThe six parameters of the method SetTransform are mentioned above, which can be understood as the composite method of zooming, rotating and moving. When you call SetTransform (), it resets the previous transformation matrix and then constructs a new matrix, so in the example below, the red rectangle is not displayed because it is below the blue rectangle.
1 varC=document.getelementbyid ("MyCanvas");2 varCtx=c.getcontext ("2d");3 4Ctx.fillstyle= "Yellow";5Ctx.fillrect (0,0,250,100)6 7Ctx.settransform (1,math.pi/6,-math.pi/6,1,30,10);//two 1 for the canvas to scale, MATH.PI/6 to rotate 30 degrees clockwise, (30,10) for panning8ctx.fillstyle= "Red";9Ctx.fillrect (0,0,250,100);Ten OneCtx.settransform (1,math.pi/6,-math.pi/6,1,30,10); ACtx.fillstyle= "Blue"; -Ctx.fillrect (0,0,250,100);
Similar to SetTransform, there is a method transform (), which all have six parameters. But the difference is that each time transform () is called, it is built on the previous transformation matrix. The red rectangle drawn first in the following code is consistent with the position of the red rectangle, and once again the transform (1,math.pi/6,-math.pi/6,1,30,10) is called to change the canvas, This transformation is transformed on the current canvas state so the blue rectangle does not overlap with the red color. As it seems, the relative position of red and yellow is the same as the relative position of blue and red.
1 varC=document.getelementbyid ("MyCanvas");2 varCtx=c.getcontext ("2d");3 4Ctx.fillstyle= "Yellow";5Ctx.fillrect (0,0,250,100)6 7Ctx.transform (1,math.pi/6,-math.pi/6,1,30,10);8ctx.fillstyle= "Red";9Ctx.fillrect (0,0,250,100);Ten OneCtx.transform (1,math.pi/6,-math.pi/6,1,30,10); ACtx.fillstyle= "Blue"; -Ctx.fillrect (0,0,250,100);
If you are interested in canvas drawing, you can also see this blog http://www.cnblogs.com/fangsmile/p/5644611.html
Canvas drawing panning translate, rotating rotate, scaling scale
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
