Translate, scale, rotate and other methods of canvas

1.translate (x, y): pan, move the coordinate origin of the canvas to the left and right of the X, and move the Y.canvas in the top and bottom direction by the default position (0,0).

Example: If the canvas Origin falls on (translate), then the origin (10,10) is moved 10 on the x-axis and y-axis respectively on the origin (the primary), then the original point becomes (11,11).
2.scale (x, y): enlarged. X is the magnification in the horizontal direction and y is the vertical magnification.
3.rotate (Angel): rotate. Angle refers to the angle of rotation and rotates clockwise. 4.transform (): Shear. The so-called shear, in fact, is to push the top or bottom of the image to one side.
The first is a good understanding, that is, to clear the order.

The canvas's transformation is not for the entire canvas, but for shapes or paths that are drawn after the transformation method is called. As follows:

context.rotate(45 * Math.PI/180);context.fillRect(50, 50, 50, 50);

The order is important, and the reverse has no effect on rotation.

Second, when converting, you need to move the center point of the transformation to the center of the shape itself, otherwise, consider the following example (the light blue section indicates canvas):

context.fillRect(50, 50, 50, 50);

This is the effect of no conversion, and then look at the effect of rotating 45°:

context.rotate(45 * Math.PI/180);context.fillRect(50, 50, 50, 50);

As you can see, the center of rotation is the upper- left corner of the canvas (the Center of Scale () is also the upper-left corner), which is the point (0,0), but usually we need to revolve around our own center, so we have a second.

==========================================================================================
Let's talk about how to move the center point .

If FillRect (50, 50, 50, 50), then the center point of this rectangle is (x + width/2, y +height/2), i.e. (75, 75).

As I said above, the center of rotation is the upper left corner of the canvas, and all we have to do is move (0, 0) to the position (75, 75).

The translate () method of the canvas allows the origin of the coordinate system to move up or down. That's what we need!

context.translate(x + width/2, y +height/2);

Well, the center is finished, remember the first of the above is not, remember the order, now the rectangle is drawn, fillRect () parameters x and y now what is it?

After calling translate (), the entire coordinate system has been translated, so our previous fillrect (50, 50, 50,50), the upper left corner of the rectangle is no longer (50, 50), but ( -0.5 * width, -0.5 * height);

context.fillRect(-0.5 * width, -0.5 *height);

==========================================================================================

Say the scale (), if we need to zoom in 1 time times, that is scales (2, 2); just now, the center point of the zoom is also the top-left corner of the canvas, so we're going to do the coordinate translation:

context.translate(x + width/2, y +height/2);context.scale(2, 2);

Then draw the rectangle, here is very easy to appear illusion, as if to draw a magnified 1 time times after the rectangle, in fact, do not, how to draw or how to draw:

context.fillRect(50, 50, 50, 50);-----------------------------------------------------------understanding of the translate () method of the canvas

• Canvas.save (); //Lock canvas (in order to save the previous canvas state)
• Canvas.translate (ten ); Move the origin of the current canvas to (10,10), followed by (10,10) as the reference point, the default origin is (0,0)
• Drawscene (canvas);
• Canvas.restore (); //return (adjust) The current canvas to the previous save () state
• Canvas.save (); //Lock canvas (in order to save the previous canvas state)
• Canvas.translate ( ten); Move the origin of the current canvas to (160,10), followed by (160,10) as the reference point,
• Canvas.cliprect (Ten, ten, + ); The real coordinates here are top left (170,170), lower right (250,250)
• Canvas.cliprect (+, +, +, Region.Op.DIFFERENCE);
• Drawscene (canvas);
• Canvas.restore ();

Translate, scale, rotate and other methods of canvas