Comment: The default width and height of canvas are 300 and 150. To avoid exceptions, it is best to use display attributes to add them instead of using css to add width and height. Below is a brief introduction to the precautions for using canvas. Interested friends can refer to it. I hope it will be helpful to you.
1. Canvas Chinese tutorial https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial2. The default width and height of canvas are 300 and 150. To avoid exceptions, it is best to use display attributes to add them instead of using css to add width and height.
3. Instructions for adding browsers that do not support the canvas tag inside the canvas tag
4. You can also determine whether the browser supports canvas through the following js code.
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
5. Canvas only supports the drawing of one basic shape, that is, rectangles, but other figures can be drawn through the canvas path.
6. There are four functions to draw a rectangle: rect, fillRect, strokeRect and clearRect
7. The function of beginPath is used to start a new path layer. If not added, it means drawing on the original path layer. The effects of the following two codes are completely different. The first code shows two red lines, and the second code shows a black line and a red line.
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5, 40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5, 40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
8. If the path is not required to close, closePath can be used. If fill is used, the path will be automatically closed. There is no need to use closePath anymore.
9. As long as you have sufficient patience, you can use the Bezier curve to draw any figure.
10. There is a bug in the quadratic curve under Firefox, so the cubic curve can be used instead of the quadratic curve.
11. Images (such as PNG, GIF, JPEG, etc.) can be introduced into canvas, and other canvas elements can also be used as the source of the image.
12. Below is the basic canvas image drawing code, where image is image or canvas object, x and y are their starting coordinates in the target canvas
drawImage(image, x, y)
The following code represents the zoomed image, width and height represent the zoomed size
drawImage(image, x, y, width, height)
The following code represents a clipping image. The first parameter is the same as the others, both are references to one image or another canvas. The other 8 parameters respectively represent the starting x coordinates of the cut in the picture, the starting y coordinates of the cut in the picture, the width of the cut area, the height of the cut area, the x coordinates of the drawn position, the y coordinates of the drawn position, the width of the drawn figure, the height of the drawn figure, the size of the cut area can be different from the size of the drawn figure, and will be scaled to the size of the drawn picture.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
13. strokeStyle is used to set the color of the graphic outline, while fillStyle is used to set the fill color. color can be a string, gradient object, or pattern object representing the CSS color value. By default, both the line and fill colors are black (CSS color value #000000).
14. Image transparency can be expressed by globalAlpha = transparency value or rgba color value
15. The lineWidth property sets the thickness of the current drawn line. In order to solve the 1px line width bug, +0.5 is used to solve it.
16. The line on the leftmost line of the lineCap attribute uses the default butt. It can be noted that it is flush with the auxiliary line. In the middle is the effect of round, and a semicircle with a radius of half the line width is added at the end point. On the right is the effect of square, with a square with equal width and a height of half the line width added at the end point.
17. Here I also use three polylines as an example to set different lineJoin values. The top one is the effect of round, the edges and corners are rounded, and the radius of the circle is equal to the line width. The middle and the bottom are the effects of bevel and miter respectively. When the value is miter, the line segment will extend outside the connection until it intersects at one point. The extension effect is restricted by the miterLimit attribute to be introduced below
18. The save and restore methods are used to save and restore the canvas state, and neither have parameters. The state of Canvas is a snapshot of all the styles and deformations applied to the current screen. The Canvas state is saved in the form of a heap (stack). Every time the save method is called, the current state will be pushed into the heap and saved. Every time the restore method is called, the previous saved state pops up from the heap and all settings are restored.
19. Transform(1, 0, 0, 1, 0, 0) parameters represent horizontal scaling, horizontal rotation (clockwise), vertical rotation (counterclockwise), vertical scaling, horizontal offset, vertical offset
setTransform(1, 0, 0, 1, 0, 0) means resetting the previous transformation matrix and then building a new matrix. The parameters are the same as above
rotate(angle), (one radius is equal to 1 radian, 2πr/r=radian, that is, 360=2π, that is, 1=π/180)
20. Animation is actually constantly clearing the artboard (clearRect()) and then repainting it