The function of beginPath is very simple, it is to start a new path, but it is very important in the process of using canvas drawing.
Let’s look at a small piece of code first:
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle=green; ctx.fill(); ctx.rect(0,0,100,100); ctx .fillStyle=yellow; ctx.fill();
Our code has no errors, but we get two yellow squares with a side length of 100px, instead of one green and one yellow. Why is this?
In fact, the drawing methods (fill, stoke) in canvas will draw all paths after the last beginPath. In the above code, the first rectangle is filled twice, the first time is green and the second time is yellow, so Two yellow rectangles were obtained. Similarly for drawing line segments, or other curves, or graphics, no matter where you moveTo, as long as you do not have a beginningPath, you are drawing a path.
If the graphics you draw are inconsistent with what you imagined, remember to check beginPath.
When talking about beginPath, we have to mention closePath. In fact, the two have nothing to do with each other. closePath means to close the path, not to end the path. It just connects the end point of the path to the starting point, not to start a new path.
We add a closePath after the first fill in the above code, and we still get two yellow rectangles.
But if we add a beginPath later, we will get two rectangles of different colors.
In summary, don't try to start a new path by closing a section of the path, and if you don't close the path, even if you start a new path, it won't be closed.
Supplement: Understanding Beginpath and Closepath of canvasbeginPath() method
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 0.5 is to avoid blurry lines. So what kind of graphics will the above code get? Is it a black line and a red line?
From the code point of view, there is no problem with our logic, but the result is that we get two red lines, not one black and one red.
If you understand why this is, then you don’t need to read the rest. This is the importance of beginPath.
The drawing methods in canvas (such as stroke, fill) will draw based on all paths after the last beginPath. For example, I stroked twice in the above code. In fact, these two strokes were based on all paths after the first beginPath. That is to say, we stroked the first path twice. The first stroke was black, and the second stroke was red, so it was also red in the end.
1. No matter where you use moveTo to move the brush, as long as you don't beginPath, you are always drawing a path.
2. Functions such as fillRect and strokeRect, which draw independent areas directly, will not interrupt the current path.
If the graphics you draw are different from what you imagined, remember to check whether there is a reasonable beginPath.
-------
Speaking of beginPath, we have to mention closePath. Are the two closely related? The answer is almost nothing.
closePath does not mean to end the path, but to close the path. It will try to connect a path from the end of the current path to the starting point to close the entire path. However, this does not mean that the path after it is the new path!
We add closePath after the first lineTo in the above code, and we can find that we still get two red lines.
But if we add beginPath after the first stroke, we will get a black line and a red line as expected.
ctx. stroke ( ) ; ctx. beginPath ( ) ; //Attention! ctx. moveTo ( 100.5 , 40.5 ) ; ctx. lineTo ( 200.5 , 40.5 ) ctx. strokeStyle = '#f00' ; ctx. stroke ( ) ;
In summary, don't try to start a new path by closing an existing path. When you start a new path, the previous path will not be closed.