Notes for using canvas

1. canvas Chinese tutorials 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.
　　

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 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 codes are completely different. The first code shows two red lines, the second line of code displays 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 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.imageIs an image or canvas object,xAndY is the starting coordinate of the 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,strokeStyleIs used to set the color of the image contour, andfillStyleUsed to set the fill color.colorIt 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,lineCapThe default line is used for the leftmost line of the attribute.butt. It can be noted that it is flat with the auxiliary line. In the middleroundThe endpoint is added with a half-width half of the radius. On the right issquareEffect, the endpoint is added with an equal width and the height is half the width of the square

17,lineJoinHere, I also use three broken lines as an example to set differentlineJoinValue. The top one isroundAnd the radius of the circle is equal to the width of the line. The middle and bottom lines are bevel and miter respectively. The value ismiter The line segment will extend outside the connection until it is handed over to a point. The effect of the extension will be described below.miterLimitAttribute Constraints

18,saveAndrestoreThe method is used to save and restore the canvas status. There are no 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 callsave Method, the current status will be pushed into the heap to save. Each callrestore Method. The last saved status 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