HTML5 instance tutorial: Canvas tag implements matrix transformation

Article introduction of Wulin.com (www.vevb.com): The application of Canvas tags for HTML5 daily practice - matrix transformation.

So far, we have learned the graph transformation technology implemented by using coordinate transformation. When the coordinate transformation cannot meet our needs, we can use matrix transformation technology. Next, we will introduce more complex matrix transformation and deformation techniques.

Matrix is ​​used specifically to achieve graphic deformation. It is used together with coordinates to achieve the purpose of deformation. When the graphics context is created, a default transformation matrix is ​​actually created. If this matrix is ​​not modified, the figure drawn next will draw the figure with the upper left corner of the canvas as the coordinate origin. The figure drawn will not be scaled and deformed. However, if this transformation matrix is ​​modified, the situation will be different.

Transform method

context.transform(a, b, c, d, x, y);

This method has 6 parameters, among which the four parameters a, b, c, and d are mainly used to deform the figure; x and y represent moving coordinate points.

The three methods mentioned in the previous section using coordinate transformation for graph deformation:

translate(x, y);

scale(x ,y);

rotate(angle);

They can all be replaced by transform method, and the six parameters in context.transform(a, b, c, d, x, y); are as follows:

translate(x, y);

scale(a, d);

rotate(b, c);//This method actually has only one parameter. In order to facilitate understanding and correspond to transform, the remaining 2 parameters are used. I put it here to tell you that these two parameters are similar in function and are related to rotation.

Code Case