HTML5 Canvas drawing Beginpath and Closepath

Beginpath This canvas function I have already told, his role is very simple, is to start a new path, we first look at the following small piece of code:

varCTX = 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 ();

What kind of graphics does the above code get? is not a black line a red wire?

From the code point of view, our logic is no problem, but the result is that we get two red lines, not a black and red.

If you understand why, then you don't have to look at the back. This is the importance of Beginpath.

Drawing methods in the canvas, such as Stroke,fill, are drawn based on all paths after "last Beginpath." For example, the above code I have a stroke two times, in fact, these two are based on the first Beginpath all the path after the painting. That is to say the first path we have two stroke, the first is black, the second is red, so the end is red.

1. No matter where you move your brushes with moveto, as long as you don't beginpath, you are always drawing a path.
2. FillRect and Strokerect, which directly draw a function of a separate area, do not interrupt the current path.

If your drawing is different from what you think, check to see if there is a reasonable beginpath.

Speaking of Beginpath, we have to mention Closepath, the two are not very "tight" connection? The answer is almost nothing.

Closepath means not to end the path, but to close the path , which will attempt to connect a path from the end of the current path (after the moveto point) to the starting point, so that the entire path is closed. However, this does not mean that the path after it is the new path!

We add Closepath to the first lineto of the code above, and we can see that we've got two red lines.

But if we add beginpath to the back of the first stroke, we will get a black line with a red thread.

// Watch out! Ctx.moveto (100.5,40.5); Ctx.lineto (200.5,40.5'  #f00'; Ctx.stroke ();

All in all, it is not an attempt to start a new path by closing an existing path, but to start a new path, and the previous path will not be closed.

 varCTX = document.getElementById ('MyCanvas'). GetContext ('2d');        Ctx.beginpath (); Ctx.moveto (100.5,20.5); Ctx.lineto (200.5,20.5); Ctx.moveto (110.5,25.5); Ctx.lineto (210.5,25.5); //Ctx.stroke (); //Ctx.beginpath (); //Ctx.moveto (100.5, 40.5);Ctx.lineto (200.5,40.5) Ctx.strokestyle='#f00';        Ctx.closepath (); Ctx.stroke ();

The results are as follows:

Ctx.moveto (110.5, 25.5); link with  ctx.lineto (200.5, 40.5).

HTML5 Canvas drawing Beginpath and Closepath