In-depth analysis of HTML5 Canvas to control the graphic matrix transformation method, html5canvas

In-depth analysis of HTML5 Canvas to control the graphic matrix transformation method, html5canvas

Before introducing matrix transformation transform (), let's talk about transformation matrices.

The above is the transformation matrix corresponding to the transform () method in the Canvas. This method is the six parameters shown in the input graph, specifically context. transform (a, B, c, d, e, f ).

The meanings of parameters are shown in the following table:

Parameters	Meaning
A	Horizontal scaling (1)
B	Horizontal skew (0)
C	Vertical skew (0)
D	Vertical Scaling (1)
E	Horizontal Displacement (0)
F	Vertical Displacement (0)

When we place the corresponding 0 or 1 into the matrix, we can find that this is a unit matrix (the default value of horizontal and vertical scaling is 1, which means scaling 1 times, that is, no scaling ). This method uses a new change matrix and the current transformation matrix for multiplication, and then obtains the effects of various changes.

Here, when we want to transform a graph, we only need to operate the parameters corresponding to the transform matrix, multiply the coordinates of each fixed point of the image by the matrix to obtain the coordinates of the new fixed point.

Transform () method

In the Canvas plot, we provide a method to change the transformation matrix, that is, transform ().

The default coordinate system is the coordinate origin (0, 0) in the upper left corner of the canvas ). The greater the value to the right X axis, the greater the value to the down Y axis. In the default coordinate system, the coordinates of each point are directly mapped to a CSS pixel. Some specific operations and attribute settings on the canvas use the default coordinate system. However, in addition to the default coordinate system, each canvas also has a "current transformation matrix" as part of the graph state. This matrix defines the current Coordinate System of the canvas. When the coordinates of a vertex are specified, most operations on the canvas map the vertex to the current coordinate system, instead of the default coordinate system. The current transformation matrix is used to specify the coordinate transformation to the equivalent coordinate in the default coordinate system. The coordinate transformation also affects the drawing of text and line segments.
 
Calling the translate () method simply moves the coordinate origin from top to bottom, left, and right.
The rotate () method rotates the coordinate axis clockwise according to the specified angle.
The scale () method extends and shortens the X axis or distance from the Y axis. Pass negative values
 
Scale uses the coordinate origin as a reference point to flip the coordinate axis. It is like an image in the mirror.
Translate is used to move the coordinate origin point to the bottom left corner of the canvas, and then the scale method is used to flip the Y axis, so that the larger the upward Y axis.

Understanding coordinate system transformation from a mathematical perspective:
The translate, rotate, and scale methods can be easily understood by imagining the transformation of the coordinate axes. From the perspective of algebra, it is easy to understand coordinate transformation, that is, to convert the transformation into a point (x, y) in the transformed coordinate system to the original coordinate system (x ', Y ').
Call c. translate (dx, dy ). The method is equivalent to the following expression:

The Code is as follows:
X' = x + dx; // 0 of the x axis in the new system, which is dx in the original system
Y' = y + dy;
C. scale (sx, sy );
X' = sx * x;
Y' = sy * y;
C. rotate ()
X' = x * cos (a)-y * sin ();
Y' = y * cos (a) + x * sin ();

We recommend that you use transform () in the following scenarios:

1. Use context. transform (, dx, dy) instead of context. translate (dx, dy)
2. Use context. transform (sx, sy,) instead of context. scale (sx, sy)
3. Use context. transform (0, B, c, 0) to achieve skew (most practical ).
You no longer need to use it to implement rotation, and you do not need to fully record these conclusions. You can directly write down the meaning of the six parameters of abcdef, and the effect is the same.

Let's take a look at the code and get familiar with it:

Copy the content to the clipboard using JavaScript Code

1. <! DOCTYPE html>
2. <Html lang = "zh">
3. <Head>
4. <Meta charset = "UTF-8">
5. <Title> matrix transformation </title>
6. <Style>
7. Body {background: url ("./images/bg3.jpg") repeat ;}
8. # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
9. </Style>
10. </Head>
11. <Body>
12. <Div id = "canvas-warp">
13. <Canvas id = "canvas">
14. Does your browser support Canvas ?! Just change one !!
15. </Canvas>
16. </Div>
18. <Script>
19. Window. onload = function (){
20. Var canvas = document. getElementById ("canvas ");
21. Canvas. width = 800;
22. Canvas. height = 600;
23. Var context = canvas. getContext ("2d ");
24. Context. fillStyle = "# FFF ";
25. Context. fillRect (0, 0, 800,600 );
27. Context. fillStyle = "yellow ";
28. Context. strokeStyle = "#00 AAAA ";
29. Context. lineWidth = 5;
31. Context. save ();
32. // Pan to (300,200)
33. Context. transform (300,200 );
34. // The horizontal direction is enlarged by 2 times, and the vertical direction is enlarged by 1.5 times.
35. Context. transform (1.5, 0 );
36. // The width of the horizontal direction to the right is 10%, and the distance from the vertical direction to the upward height is 10%
37. Context. transform (1,-0.1, 0.1, 0 );
38. Context. fillRect (0, 0, 200,200 );
39. Context. strokeRect (0, 0, 200,200 );
40. Context. restore ();
41. };
42. </Script>
43. </Body>
44. </Html>

Running result:

SetTransform () method
The behavior of the transform () method is relative to other transformations completed by rotate (), scale (), translate (), or transform. For example, if we have set the drawing to double, the transform () method will double the drawing, and the drawing will eventually be quadrupled. This is the same as the previous transformation.

However, setTransform () does not act against other transformations. Its parameters are also six. context. setTransform (a, B, c, d, e, f), which is the same as transform.

Here we use an example to illustrate:
Draw a rectangle, reset and create a new transformation matrix through setTransform (), draw a rectangle again, reset and create a new transformation matrix, and then draw a rectangle again.

Copy the content to the clipboard using JavaScript Code

1. <! DOCTYPE html>
2. <Html lang = "zh">
3. <Head>
4. <Meta charset = "UTF-8">
5. <Title> matrix transformation </title>
6. <Style>
7. Body {background: url ("./images/bg3.jpg") repeat ;}
8. # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
9. </Style>
10. </Head>
11. <Body>
12. <Div id = "canvas-warp">
13. <Canvas id = "canvas">
14. Does your browser support Canvas ?! Just change one !!
15. </Canvas>
16. </Div>
18. <Script>
19. Window. onload = function (){
20. Var canvas = document. getElementById ("canvas ");
21. Canvas. width = 800;
22. Canvas. height = 600;
23. Var context = canvas. getContext ("2d ");
24. Context. fillStyle = "# FFF ";
25. Context. fillRect (0, 0, 800,600 );
27. Context. fillStyle = "yellow ";
28. Context. fillRect (200,100,250,100)
30. Context. setTransform (1, 0.5,-0.5, 10 );
31. Context. fillStyle = "red ";
32. Context. fillRect (200,100,250,100 );
34. Context. setTransform (1, 0.5,-0.5, 10 );
35. Context. fillStyle = "blue ";
36. Context. fillRect (200,100,250,100 );
37. };
38. </Script>
39. </Body>
40. </Html>

Running result:

To explain the process, when setTransform () is called, it resets the previous transformation matrix and creates a new matrix. Therefore, the red rectangle is not displayed in the following example, because it is under the blue rectangle.