Canvas beginPath (), canvasbeginpath

Canvas beginPath (), canvasbeginpath

Let's give a simple example,

Var myCanvas = document. getElementById ("myCanvas ");
Var context = myCanvas. getContext ("2d ");

Context. beginPath ();
Context. moveTo (150, 50 );
Context. lineTo (250, 50 );
Context. strokeStyle = "green ";
Context. stroke ();

Context. beginPath ();
Context. moveTo (150, 80 );
Context. lineTo (250, 80 );
Context. strokeStyle = "yellow ";
Context. stroke ();

 

Context. beginPath ();
Context. moveTo (150,100 );
Context. lineTo (250,100 );
Context. strokeStyle = "blue ";
Context. stroke ();

In this example, three horizontal lines are drawn from top to bottom.

If you remove the third beginPath () method, you will find that the color of the third line is also drawn to the second yellow line. This will find beginPath () the method will allow the drawing to re-locate the start point during painting without overlapping with the previous drawing. In addition, it is still necessary.