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.
Examples
We draw a rectangle on the canvas.
1 <!DOCTYPE html> 2As 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 TranslationIf 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 ctx.save();2 ctx.translate(25,25);3 ctx.fillStyle="yellow";4 ctx.fillRect(0,0,250,100)5 ctx.restore();2 ScalingYou 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 ctx.save();2 ctx.scale(0.5,0.5);3 ctx.fillStyle="yellow";4 ctx.fillRect(25,25,250,100);5 ctx.restore();3 rotateTo 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 ctx.save();2 ctx.rotate(Math.PI/6);3 ctx.fillStyle="yellow";4 ctx.fillRect(25,25,250,100)5 ctx.restore();4. Determine the center pointThe 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 MatrixAs 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 http://www.cnblogs.com/fangsmile/p/5644611.html.
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
