Basic drawing mechanism of canvas

The canvas tag of html5 itself does not have any behavior, its role is only equivalent to laying a canvas of a specified size on the web page. Then, we need to use the relevant API provided by canvas and its subordinate objects in JavaScript to draw on the canvas.

 

In html5, each canvas tag (canvas) corresponds to the Canvas object in JavaScript. The Canvas object itself cannot be directly used for painting. After all, the Canvas object in js corresponds to the canvas tag in html5. The canvas tag only acts as a canvas. Of course, the Canvas object can only be regarded as a canvas. Of course, the canvas itself cannot draw graphics. However, each Canvas object in js provides us with a powerful brush, as long as we use this brush to paint, it can be displayed on the corresponding canvas. This brush is the CanvasRenderingContext2Dobject.

 

To learn to use Canvas to draw graphics, you must understand the graphics drawing process of Canvas.

 

Drawing graphics with Canvas is like holding a paintbrush (equivalent to CanvasRenderingContext2D) drawing.

For example, when we draw a triangle with a brush, we must first move the brush to the starting point of the triangle (equivalent moveTo()), then draw a straight line segment to the second point (equivalent lineTo()), and then draw another line to the third A straight line segment (equivalent lineTo()) of a point, and finally draw a straight line segment connected end to end to close the triangle (equivalent closePath()), so that a triangle is drawn.

 

The process of drawing graphics with Canvas is similar. The difference is that in html5 canvas, a complete drawing operation (such as the above triangle drawing operation) is called a "drawing path" (referred to as "path"), and each individual drawing operation (such as drawing a triangle) an edge) is called a subpath.

 

To start drawing a new graph, you need to create a new path, which is to call a beginPath()method. In memory, paths are stored as a set of sub-paths that together form a graph. Each time we call beginPath()it, the existing subpaths in the path are cleared, thus storing the new path to draw a new graph. Therefore, before we draw each new graphic, we should call beginPath()to clear the original drawing path.

 

In the real world, every time we apply a brush to the canvas, we can see the effect on the canvas immediately, but this is not the case with html5 canvas. Because, all our painting operations are performed in memory, all our painting operations (subpaths) will be uniformly stored in memory first. Only when we confirm that the drawing path of a graphic is completed and issue the command "paint on canvas", at this time, this group of sub-paths in the memory will actually perform the corresponding drawing operation, and finally display the corresponding drawing operation on the canvas. Graphic effects.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326268556&siteId=291194637