Translate, rotate, scale, and canvasrotate for Canvas plotting

Source: Internet
Author: User

Translate, rotate, scale, and canvasrotate for Canvas plotting
Canvas operations

The canvas drawing environment is changed through translate (), scale (), rotate (), setTransform (), and transform (), which will affect the transformation matrix of the canvas.

Function Method Description
Translate Dx, dx X and Y of the number of conversions
Scale Sx, sy Horizontal and vertical scaling factors
Rotate Angle The amount of rotation, expressed in radians. A positive value indicates clockwise rotation, and a negative value indicates clockwise rotation.
SetTransform A, B, c, d, e, f Horizontal scaling, horizontal skew (associated with rotation), vertical skew (associated with rotation,-horizontal skew), vertical scaling, horizontal movement, vertical movement
Transform A, B, c, d, e, f Horizontal scaling, horizontal skew, vertical skew, vertical scaling, horizontal movement, vertical movement


The translate () method adds horizontal and vertical offsets to the transform matrix of the canvas. ParametersDxAndDyAdd it to all vertices in the subsequent defined path.

The scale () method adds a zoom transform to the current transform matrix of the canvas. Zooming is achieved through independent horizontal and vertical scaling factors. For example, passing a value of 2.0 and 0.5 will cause the drawing path to be twice the original width, and the height to be 1/2. Specify a negativeSxValue, which causes the X coordinate to be folded along the Y axis, while specifying a negativeSyThe Y coordinate is folded along the X axis.

By specifying an angle, the rotate () method changes the ing between the Canvas coordinates and the pixels of the <Canvas> element in the Web browser, so that any subsequent drawing is displayed as a rotation 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 and draws a rectangle again. When transform () is called, it is constructed on the previous transformation matrix.



We draw a rectangle on the canvas.

 1 <!DOCTYPE html> 2 

As shown in the following figure: the drawing range is to draw a rectangle with a width and height of 250,100 from the coordinate (0, 0.

The following operations are performed on the rectangle, such as translation, scaling, and rotation.

1 Translation

If we translate it to the center, we can change its coordinate value, such as ctx. fillRect (250,100,), to move the starting position of the rectangle ). The effects shown are as follows:

Another method is to move the canvas through the translate method of context to achieve the same visual effect. The source of the canvas is in the upper left corner before it is changed. After the translate method is used, the entire coordinate system is translated.

Note: When operating the canvas transformation matrix, it is best to use the save method to save the current status of the record canvas before transformation. After painting, you can use the restore method to restore the matrix status before transformation.

1;2 ctx.translate(25,25);3 ctx.fillStyle="yellow";4 ctx.fillRect(0,0,250,100)5 ctx.restore();
2 Scaling

You can adjust the width and height of the rectangle.

This section describes how to scale the canvas by using the scale method of context. You can use the following code to reduce the yellow rectangle to half of the original one (for example ).

1;2 ctx.scale(0.5,0.5);3 ctx.fillStyle="yellow";4 ctx.fillRect(25,25,250,100);5 ctx.restore();

3 rotate

To rotate the rectangle in the graph, you need to change the canvas matrix state using the rotate method. Rotate (Math. PI/6) is to rotate the canvas 30 degrees clockwise and draw a rectangle.

1;2 ctx.rotate(Math.PI/6);3 ctx.fillStyle="yellow";4 ctx.fillRect(25,25,250,100)5 ctx.restore();

4. Determine the center point

The figure shows that the scaling and rotation above are all centered on the top left corner of the canvas. If we need to change the center of the canvas, you must call the rotate and scale methods to modify the coordinates of the canvas to the center of the canvas placeholder (width/2, height/2), and then perform scaling and transformation, 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 Center 3 ctx. rotate (0.5, 0.5); // if it is scaling, here is the scaling code 4 ctx. translate (-width/2,-height/2); // corrected canvas Coordinate System 5 ctx. fillStyle = "yellow"; 6 ctx. fillRect (25,25, 250,100) 7 ctx. restore ();

The effect is as follows:

5. Set the Matrix

As mentioned above, the six parameters of setTransform can be understood as a composite method for scaling, rotating, and moving. When you call setTransform (), it resets the previous transformation matrix and creates a new matrix. Therefore, the red rectangle is not displayed in the following example because it is under the blue rectangle.

1 var c = document. getElementById ("myCanvas"); 2 var ctx = c. getContext ("2d"); 3 4 ctx. fillStyle = "yellow"; 5 ctx. fillRect (250,100,) 6 7 ctx. setTransform (1, Math. PI/6,-Math. PI/6, 1, 30, 10); // two 1 represents the canvas for scaling, Math. PI/6 indicates 30 degrees clockwise rotation, and (30, 10) indicates translating 8 ctx. fillStyle = "red"; 9 ctx. fillRect (0, 0, 250,100); 10 11 ctx. setTransform (1, Math. PI/6,-Math. PI/6, 1, 30, 10); 12 ctx. fillStyle = "blue"; 13 ctx. fillRect (0, 0, 250,100 );

Similar to setTransform, there is also a method transform (), which has six parameters. But the difference is that each time transform () is called, it will be built on the previous transformation matrix. In the following code, the red rectangle and its position are the same. After the red rectangle is drawn, transform (1, Math) is called again. PI/6,-Math. PI/6, 1, 30, 10) change the canvas. This change is performed on the current canvas state, so the blue rectangle is not overlapped with the red one. The relative positions of red and yellow are the same as those of blue and red.

 1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3  4 ctx.fillStyle="yellow"; 5 ctx.fillRect(0,0,250,100) 6  7 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10); 8 ctx.fillStyle="red"; 9 ctx.fillRect(0,0,250,100);10 11 ctx.transform(1,Math.PI/6,-Math.PI/6,1,30,10);12 ctx.fillStyle="blue";13 ctx.fillRect(0,0,250,100);


For more information about canvas plotting, see this blog


Related Article

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.