<canvas></canvas>It’s just a container for drawing graphics. In addition to ID, class, style and other attributes, there are also height and width attributes. There are three main steps in drawing on < canvas > > elements
1. Get the DOM object corresponding to the < canvas > element, which is a canvas object;
2. Call getcontext () method of canvas object to get a canvasrenderingcontext2d object;
3. Call canvasrenderingcontext2d object to draw.
Translation:context.translate (x, y), the receiving parameters are that the origin moves X in the x-axis direction and Y in the y-axis direction.
Zoom:context.scale (x, y), the receiving parameters are X-axis scaled by x-scale and y-axis scaled by y-scale.
Rotation:context.rotate (angle), the receiving parameter is the rotation angle of the coordinate axis.
It should be noted that after the graphics are changed, the next drawing is followed by the last state, so if you need to return to the initial state, you need to use the context.save (); and context.restore (); to save and restore the current state:
- var canvas = document.getElementById(“canvas”);
- var context = canvas.getContext(“2d”);
- context.fillStyle = “#1424DE”;
- context.fillStyle = “#F5270B”;
- context.fillStyle = “#18EB0F”;
- context.rotate(Math.PI / 4);
The results are as follows
Another related to graph transformation is matrix transformation context.transform (a, b, c, d, e, f, g)。 The meaning of the parameter is as follows:
A horizontal zoom (default is 1)
B horizontal tilt (default is 0)
C vertical tilt (default is 0)
D vertical scaling (default is 1)
E horizontal displacement (default is 0)
F vertical displacement (default is 0)
Readers can verify the effect of each parameter by themselves, which will not be introduced here.
The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.