HTML5 Canvas Transform and matrix

HTML5 Canvas Transform and matrix

First, let's take a look at the example on W3school:

JavaScript syntax: Context.transform (A, B, C, D, E, f);

Definition and Usage: each object on the canvas has a current transformation matrix. The transform is used to define a new matrix to replace the original transformation matrix.

Six parameters, the corresponding matrix is:

Here, I say the transformation matrix to use the knowledge of the matrix, a graph, on the canvas is nothing but move, zoom out, and rotate, oblique cut, and so on.

PS tells us that no matter how complex the graph, is composed of a point, the transformation matrix to do, nothing but the application of a certain algorithm, a graph on a point, map to another point.

So, we can draw the following formula:

Depending on the matrix in the middle, we can get a different transformation effect.

Matrix multiplication is defined as: Suppose there are two matrices A and B, if you want to get C through a*b, then the number of columns of matrix A must be the same as the number of rows in matrix B before the operation can be performed. The first row of the new matrix is obtained, and the value of column J is the result of multiplying the value of the line I of a with the values corresponding to the J column of B, and then adding the results.

First, let's look at the movement of the graph on the canvas.

The algorithm is simple:

X ' = x + A

Y ' = y + b

This moves the dots (x, y) to the point.

The matrix of the corresponding transformation is

X ' 1 0 A X

Y ' 0 1 b * y

1 0 0) 1 1

X ' = 1*x + 0*y + a*1;

Y ' = 0*x + 1*y + b*1;

1 = 0*x + 0*y + 1*1;

Then, the corresponding JS code is context.transform (1,0,0,1,A,B);

Looking at zooming out again, the algorithm is simple:

X ' = x*a;

Y ' = y*b;

Canvas is based on a certain algorithm to draw, that is, canvas drawings are vector graphics, not because of amplification and reduction and distortion, then how the canvas to zoom in and zoom out?

In fact, the x-axis, the y-axis multiplied by the corresponding scaling factor, and then the description of the path, fill.

The corresponding transformation matrix is:

X ' a 0 0 x

Y ' 0 b 0 y

1 0 0) 1 1

X ' = 1*x + 0 * Y + 0*1;

Y ' = 0*x + b*y + 0*1;

1 = 0*x + 0*y + 1*1;

The corresponding JS code is context.transform (a,0,0,b,0,0);

Then look at the rotation, the algorithm

As can be seen from the graph, the B point is obtained by turning the a point to θ, i.e.

X ' = cos (a +θ) * r

Y ' = sin (a +θ) * r

According to the trigonometric formula: cos (α + β) =cosαcosβ-sinαsinβ

Available x ' = r*cosa*cosθ–r* sina * sinθ= x * cosθ–y * sinθθ;

The same can be Y ' = x*sinθ+y*cosθ;

X ' Cosθ-sinθ0 x

Y ' sinθcosθ0 y

1 0 0) 1 1

The corresponding JS code is context.transform (Math.Cos (θ* math.pi/180), Math.sin (θ*math.pi/180), Math.sin (θ*math.pi/180), Math.cos (θ * math.pi/180), 0, 0);

The advantage of the matrix is that it can express different algorithms with 6 parameters, although it is a bit troublesome, but it is worthwhile to do so.

And so on, the oblique cut is the same, but the algorithm is more complex.

Remember, in the canvas to determine the coordinate system, and then draw, in fact, translation, zooming in and out, oblique cut, rotation, are for the coordinate system, the application of different coordinate systems, you can draw different graphics.

HTML5 Canvas Transform and matrix