Study Notes on HTML5 canvas (10)-complex paths

Small man (Bill man) Personal Original, welcome to reprint, reprint please indicate the address, small man (Bill man) column address http://blog.csdn.net/bill_man

I have already introduced the simple draw path. This article describes how to draw a line and a beiser curve. First, we will introduce the line. The effect is as follows:

The Code is as follows:

Context. beginpath ();

Context. moveTo (100,50 );

// Context. lineto (100,50 );

Context. lineto (150,150 );

Context. lineto (50,150 );

// Context. closepath ();

Context. Stroke ();

I have introduced the vertical and horizontal coordinates of the start point after moveTo. I tried it. The first one is lineto, And the next lineto is to draw a straight line from this point to the next point, next we start with this point. When we call lineto, we start with the above point. If we call context. when closepath (); is enabled, the current point and the earliest start point are connected to form a closed triangle. The effect is as follows:

Let's take a look at the beiser curve. There are two ways to implement the beiser curve: quadraticcurveto and beziercurveto, which are the second and third besels respectively. The difference is that the second besell curve has only one peak, there are both peaks and troughs in the Three-besell curve. First, let's look at the second besell curve. The effect is as follows:

The Code is as follows:

Context. beginpath ();

Context. moveTo (50,250 );

// Context. lineto (50,250 );

Context. quadraticcurveto (150,100,250,250 );

// Context. closepath ();

Context. Stroke ();

First, it is the start point, or moveTo or lineto, and then call quadraticcurveto. The first two parameters are the control point coordinates, and the last two parameters are the end point horizontal and vertical coordinates. The control point's horizontal coordinates are the same as those of the "peak, the vertical coordinates of the peak are related to the vertical coordinates of the peak. Note that the greater the vertical coordinates, the higher the peak. If context. closepath ();

The effect is as follows:

Let's take a look at the three-way Bessel curve. First, let's look at the effect:

The Code is as follows:

Context. beginpath ();

Context. moveTo (50,200 );

// Context. lineto (50,250 );

Context. beziercurveto (100,100,150,300,200,200 );

// Context. closepath ();

Context. Stroke ();

The three parameters of beziercurveto are the horizontal and vertical coordinates of the first or wave peaks or troughs, the horizontal and vertical coordinates of the second wave peaks or troughs, and the horizontal and vertical coordinates of the endpoint. The context is also opened. closepath (); also closes the curve. The effect is as follows:

In case of any errors, I hope you can correct them more.

Next, continue to study the advanced features