Canvas drawing panning translate, rotating rotate, scaling scale

Source: Internet
Author: User

Introduction to Canvas operations

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 examples

We 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 panning

If 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.

1 (); 2 ctx.translate (25,25); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (0,0,250,100)5 ctx.restore ();
2 Scaling

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.

1 (); 2 Ctx.scale (0.5,0.5); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (25,25,250,100); 5 Ctx.restore ();

3 rotation

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.

1 (); 2 ctx.rotate (MATH.PI/6); 3 ctx.fillstyle= "Yellow"; 4 ctx.fillrect (25,25,250,100)5 ctx.restore ();

4 Determining the center point

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 (); 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 matrix

The 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

Canvas drawing panning translate, rotating rotate, scaling scale

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.