Shulou(Shulou.com)06/03 Report--

This article will explain in detail what are the points for attention in the use of canvas, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

1. Canvas Chinese course https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial

2. The default width and height of canvas is 300,150. In order to avoid anomalies, it is best to add width and height by using display attributes instead of css.

3. Add a description of the browser that does not support the canvas tag inside the canvas tag

4. You can also judge whether the browser supports canvas by the following js code

The code is as follows:

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, rectangle, but other graphics can be drawn through canvas path.

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

7. The function of beginPath is to start a new path layer. If it is not added, it means to draw on the original path layer. The effect of the following two pieces of code is completely different. The first code shows two red lines, and the second code shows 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); ctx.lineTo (200.5); ctx.stroke (); ctx.moveTo (100.5); ctx.lineTo (200.5) ctx.strokeStyle ='# f00; ctx.stroke ()

The code is as follows:

Var ctx = document.getElementById ('cvs'). GetContext (' 2d'); ctx.beginPath (); ctx.moveTo (100.5); ctx.lineTo (200.5); ctx.stroke (); ctx.beginPath (); ctx.moveTo (100.5); ctx.lineTo (200.5) ctx.strokeStyle ='# f00; ctx.stroke ()

8. If the path does not need to be closed, closePath may not be used. If fill is used, the path will be closed automatically, and closePath will no longer be needed.

9. As long as you have enough patience, you can use Bezier curve to draw any figure.

10. Quadratic curve has bug under Firefox, so cubic curve can be used instead of quadratic curve.

11. Images (such as PNG,GIF,JPEG, etc.) can be introduced into canvas, and other canvas elements can also be used as sources of images

12. Here is the basic canvas drawing code, where image is an image or canvas object, and x and y are its starting coordinates in the target canvas

DrawImage (image, x, y)

The following code represents the zoom picture, and width and height represent the scaled size

DrawImage (image, x, y, width, height)

The following code represents a cut image, and the first parameter is the same as the others, both of which are references to an image or another canvas. The other eight parameters represent the reduced initial x coordinate in the picture, the reduced initial y coordinate in the picture, the reduced area width, the reduced area height, the drawn position x coordinate, the drawn position y coordinate, the drawn graphic width, the drawn graphic height, the size of the cropped area can be different from the size of the drawing, and it will be scaled to the size of the drawn picture.

DrawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

13. StrokeStyle is the color used to set the outline of the drawing, while fillStyle is used to set the fill color. A color can be a string, a gradient object, or a pattern object that represents a 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 values

15. The lineWidth attribute sets the thickness of the current drawing line. In order to solve the bug problem of 1px linewidth, the method of + 0.5 is adopted.

The leftmost line of the lineCap attribute uses the default butt. It can be noticed that it is flush with the auxiliary line. In the middle is the effect of round, with a semicircle with a radius of half the linewidth at the end. The one on the right is the effect of square, with a square of equal width and half the line width at the end.

17. LineJoin attribute here I also use three broken lines as an example, setting 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 linewidth. The middle and bottom lines are the effects of bevel and miter, respectively. When the value is miter, the segment extends on the outside of the joint until it intersects at one point, and the extension effect is restricted by the miterLimit attribute that will be described below.

18. The save and restore methods are used to save and restore the canvas state, with no parameters. The state of the Canvas is a snapshot of all the styles and deformations applied to the current screen. The Canvas state is saved as a stack, and each time the save method is called, the current state is pushed into the heap and saved. 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 represent horizontal scaling, horizontal rotation (clockwise), vertical rotation (counterclockwise), vertical scaling, horizontal offset and vertical offset, respectively.

SetTransform (1, 0, 0, 1, 0, 0) means to reset the previous transformation matrix and then construct a new matrix.

Rotate (angle), (a radius is equal to 1 Radian, 2 π rstroke r = Radian, that is, 360 °2 π, I. e. 1 = π / 180)

20. Animation is actually constantly emptying the artboard (clearRect ()) and then redrawing

What are the points for attention on the use of canvas to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.