Learn HTML5 with kingdz and explore the effects of canvas-moving, rotating, scaling

How do you respond when you first see the questions? Wow, there are so many things, but after reading this course, you will find that these functions are not the same.

1 mobileTranslate (x, y)

The offset between the left and right of X is the vertical offset of Y.

To put it bluntly, if the original coordinates are (0, 0), then after using translate (100,100), the coordinates will reach the point (100,100.

Then, first, let's write a "Wang". Haha, my surname.

Haha.

We can see that the coordinates are based on (0, 0. Next we will try to change it.

FunctionDraw (){VaRC = Document. getelementbyid ('Mycanvas');VaRCxt = C. getcontext ("2D");// Cxt. Save ();Cxt. translate (90, 0); cxt. moveTo (0, 0); cxt. lineto (200, 0); cxt. moveTo (100, 0); cxt. lineto (100,200 );// Cxt. Restore ();Cxt. moveTo (0,100); cxt. lineto (200,100); cxt. moveTo (0,200); cxt. lineto (200,200); cxt. linewidth = 2; cxt. stroke ();}
 

Have you seen it? The preceding Clause cxt. Translate (90,0 );

This is how we move his origin to see the effect.

It moved. Haha. Note that the two methods I commented out above

// Cxt. Save ();

// Cxt. Restore ();

Then, you can watch and open it and check the effect. You can see the effect of the magic horse. If you open it on your own, I will not explain it here. Although they are very common, let's get started with it.

2 rotating

Rotate (angle)

This method only accepts one parameter: angle, which is clockwise and measured in radians. [How to calculate radians? Please read the previous tutorial]

We have achieved this effect.

 Function Draw (){ VaR C = Document. getelementbyid ( 'Mycanvas' ); VaR Cxt = C. getcontext ( "2D" ); Cxt. Translate (100,100 );For (I = 1; I <7; I ++) {cxt. Save (); // Remember the status Cxt. fillstyle = 'Rgb (' + (60 * I) + ',' + (200-60 * I) + ', 25 )' ; // Fill in random colors  For (J = 0; j <I * 6; j ++) {cxt. Rotate (math. Pi * 2/(I * 6 )); // Rotation Angle Cxt. beginpath (); cxt. ARC (0, I * 12.5, 5, 0, math. Pi * 2, True ); Cxt. Fill ();} cxt. Restore (); // Restore status }}

The above example is a bit complicated. The following is a relatively simple example. I believe you will know this.How is rotate used?

 
FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCTX = C. getcontext ("2D");VaRRectwidth = 75;VaRRectheight = 75; CTX. Translate (C. width/2, C. Height/2); CTX. Rotate (math. Pi * 2/6); CTX. fillstyle ="Red"; CTX. fillrect (-rectwidth/2,-rectheight/2, rectwidth, rectheight );}
 

I should have understood this time. CTX. Rotate (math. Pi * 2/6); the point is this.

3 scaling Scaling

Scale (x, y)

ScaleThe method accepts two parameters. X and Y are the zooming factors of the horizontal and vertical axes respectively. They must both be positive values. If the value is smaller than 1.0, it means to zoom in. If the value is greater than 1.0, it means to zoom in. If the value is 1.0, there is no effect.

 
FunctionDraw (){VaRC = Document. getelementbyid ("Mycanvas");VaRCTX = C. getcontext ("2D");VaRRectwidth = 75;VaRRectheight = 75; CTX. Translate (C. width/2, C. Height/2); CTX. Scale (0.5, 0.5); CTX. fillstyle ="Red"; CTX. fillrect (-rectwidth/2,-rectheight/2, rectwidth, rectheight );}
 

In fact, this scaling down is similar to the above move. Only one is the position and the other is the shape.