Canvas Coordinate System Conversion, canvas Coordinate System

Canvas Coordinate System Conversion, canvas Coordinate System
Default coordinate system and current Coordinate System

The coordinates in the canvas start from the upper left corner. The X axis is horizontally oriented (by pixel) to the right, and the Y axis is vertically oriented down. The coordinates of x = 0 in the upper left corner and y = 0 in the upper left corner are called the origin. In the default coordinate system, the coordinates of each point are directly mapped to a CSS pixel.

However, if a fixed point for each image painting lacks flexibility, the concept of "Current Coordinate System" is introduced in the canvas, the so-called "Current Coordinate System" refers to the coordinate system referenced when the image is drawn at this time. It will also be part of the image status. For examplerotateThe rotation operation changes the current coordinate system.rotateIf there is no concept of the current coordinate system, whether it is rotation, scaling, skew, or other operations, you can only refer to the origin in the upper left corner of the canvas.

Note: The following context is obtained by getContext ("2d ").CanvasRenderingContext2DObject.

Shows the default coordinate system:

1. If context. translate (, 50) is called, the current coordinate system is relative to the default coordinate system, as shown in

2. If context. scale () is called, the scale between the current coordinate system and the original default coordinate system is as follows. Red indicates the current coordinate system.

3. If context. rotate (Math. PI/6) is called to rotate 30 degrees clockwise, the relative position of the current coordinate system and the default coordinate system is as follows:

 

 

 

Matrix Transformation transform

The three methods of coordinate deformation mentioned above, translation, scaling, and rotation, can all be done through transform.

Now let's take a look at the definition of matrix transformation: Context. transform (m11, m12, m21, m22, dx, dy). This method uses a new change matrix to perform multiplication with the current transformation matrix.

M11	M21	Dx
M12	M22	Dy
0	0	1

 

1. translate context. translate (dx, dy)

X' = x + dx

Y' = y + dy

You can use context. transform (, dx, dy) instead of context. translate (dx, dy ).

You can also use context. transform (0, 1, 0.dx, dy) instead.

2. scale context. scale (sx, sy)

X' = sx * x

Y' = sy * y

(Sx and sy represent the scaling multiples on the X and Y axes respectively)

You can use context. transform (sx, sy,) to replace context. scale (sx, sy );

You can also use context. transform (0, sy, sx, 0, 0, 0;

3 rotate context. rotate (θ)

X' = x * cos θ-y * sin θ

Y' = x * sin θ + y * cos θ

You can use context. transform (Math. cos (θ * Math. PI/180), Math. sin (θ * Math. PI/180),-Math. sin (θ * Math. PI/180), Math. cos (θ * Math. PI/180),) replace context. rotate (θ ).

You can also use context. transform (-Math. sin (θ * Math. PI/180), Math. cos (θ * Math. PI/180), Math. cos (θ * Math. PI/180), Math. sin (θ * Math. PI/180.