Canvas usage notes

Comments: The canvas width and height are 300 and 150 by default. To avoid exceptions, it is best to add the display attribute without adding the width and height through css. The following describes the precautions for using the canvas, interested friends can refer to the next ha, hope to help everyone 1, canvas Chinese tutorial https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. The default width and height of the canvas are 300 and 150. To avoid exceptions, it is best to use the display attribute instead of css to add the width and height.

3. Add a browser that does not support the canvas label to the canvas label.

4. Use the following js Code to determine whether the browser supports canvas.

The Code is as follows:
Var canvas = document. getElementById ('utorial ');
If (canvas. getContext ){
Var ctx = canvas. getContext ('2d ');
// Drawing code here
} Else {
// Canvas-unsupported code here
}

5. canvas only supports drawing a basic shape, that is, a rectangle. However, other images can be drawn through the canvas path.

6. There are four functions for drawing a rectangle: rect, fillRect, strokeRect, and clearRect.

7. beginPath is used to start a new path layer. If it is not added, it indicates that it is drawn on the original path layer. The effects of the following two sections of code are completely different, the first code displays two red lines, and the second code displays a black line and a red line.

The Code is as follows:
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 ();


The Code is as follows:
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 you do not need to close the path, closePath does not need to be used. If fill is used, the path is automatically closed, and closePath is no longer required.

9. If you have enough patience, you can use the besell curve to draw any image.

10. The quadratic curve has a bug in Firefox. Therefore, the cubic curve can be used instead of the quadratic curve.

11. Images (such as PNG, GIF, and JPEG) can be introduced into the canvas, and other canvas elements can also be used as the image source.

12. The following is the basic canvas image Rendering code. image is an image or canvas object, and x and y are the starting coordinates of x and y in the target canvas.

DrawImage (image, x, y)
The following code indicates scaling an image. width and height indicate the scaling size.
DrawImage (image, x, y, width, height)
The following code indicates cropping an image. The first parameter is the same as that of others. It is a reference of one image or another canvas. The other eight parameters indicate the starting x coordinates of the cut in the image, the starting y coordinate of the cut in the image, the width of the cut area, the height of the cut area, and the x coordinate of the drawn position, the y coordinate of the position to be drawn, the width of the image to be drawn, the height of the image to be drawn, and the size of the crop area can be different from that of the image to be scaled to the size of the image to be drawn.

DrawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
13. strokeStyle is used to set the color of the image contour, while fillStyle is used to set the fill color. Color can be a string indicating the CSS color value, gradient object or pattern object. By default, the line and fill color are both black (CSS color value #000000 ).

14. The image transparency can be expressed by globalAlpha = transparency value or rgba color value.

15. The lineWidth attribute is used to set the width of the current line. To solve the 1px line width bug, + 0.5 is used to solve the problem.

16. The default butt is used for the leftmost line of the lineCap attribute. It can be noted that it is flat with the auxiliary line. The middle is the effect of round, and the endpoint is added with a half-width half of the radius. The right side is the square effect, and the endpoint is added with an equal width and half the width of the square.

17. Here I also use three line columns as an example to set different lineJoin values. The top line is the effect of round. The corner is round, and the radius of the circle is equal to the width of the line. The middle and bottom lines are bevel and miter respectively. When the value is miter, the line segment will extend outside the connection until it is handed over to a 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 without parameters. The Canvas status is a snapshot of all styles and variants applied to the current screen. The Canvas status is saved as a stack. Each time the save method is called, the current status is pushed to the stack for saving. Each time the restore method is called, the last saved state pops up from the heap and all settings are restored.

19. transform (1, 0, 0, 1, 0, 0) parameters indicate horizontal scaling, horizontal rotation (clockwise), and vertical rotation (counterclockwise), vertical scaling, horizontal offset, vertical offset
SetTransform (1, 0, 0, 1, 0, 0) indicates resetting the previous transformation matrix and then constructing a new matrix. The parameters work the same as above.
Rotate (angle), (a radius is equal to 1 radian, 2 π r/r = radian is 360 = 2 π, that is, 1 = π/180)

20. The animation is actually constantly clearing the canvas (clearRect () and re-painting