canvasAt the same time, it’s not how to draw all kinds of graphics, but how to draw them
closePath()When do these two functions work? What do they do.
First of all, this is the case of 2d rendering, that is
CanvasRenderingContext2DObject (2d rendering context, this translation feels awkward).
One thing to be clear is the idea of drawing with canvasDrawing a graph by drawing a path, which is a collection of a series of points. There is a pen tool in PS, which is very similar to this. We will first draw the path with the pen tool, and then we can choose to fill or stroke.
When you don’t know the concept, look at it carefully
When we draw a path, there will actually be a path list to help us record the sub paths currently drawn, and the whole list is the path we are currently drawing. So what’s the ghost of subpath? For example, you draw a line in the East, a line in the west, and a line in the middle. These three lines are sub paths. They don’t have to be connected end to end. They can intersect or not. When you call
beginPath()Method, the entire list will be cleared, whether you have it or not
stroke()It’s all dead.
Canvasrenderingcontext2d. Closepath() is the method used by the canvas2d API to return the pen point to the starting point of the current subpath. It attempts to draw a line from the current point to the starting point. If the graph is already closed or has only one point, this method does nothing.
Attention, yesSubpath. The definition here is quite clear, so there is no need to repeat it.
After understanding their definitions, I should have a general idea of how to use them. It’s also necessary to say that
moveTo()The definition of
Canvasrenderingcontext2d. Moveto() is a method of canvas2d API to move the starting point of a new subpath to (x, y) coordinates.
Attention, yesSubpath. Therefore, the rules for drawing a path (including multiple sub paths) are as follows:
Draw a subpath first. be necessary
moveTo()MoveTo, and then call the corresponding drawing function, finally, it is necessary.
closePath()Close path. Drawing multiple lines is just like this.
Explanation of rule 2: why is it necessary to move to and close path? Close path is easy to understand. I just want to draw a path, so there is no need to close it. As for moveto, it depends on the effect you want to draw, literally. Where do you want to start? For example
arc()To draw a fan, you have to move the starting point to the origin first, or you will draw an arch like an arch bridge,Click to view relevant examples。
Explanation of rule 3: because the previously drawn path only records the positions of a series of points, it is not really drawn, so the function is called to render
Finally, notice that some methods automatically close the path, such as
clip(). This is also very easy to understand, because these two methods are applied to a region. If they are not closed, how can the computer know which region you want to operate on? In this case, you don’t need to call
closePath()It’s too late.
stroke()The path is not automatically closed.Click to view relevant examples。
Note: the above API definitions are fromMDN