Html5 Canvas Preliminary Study Notes (10) - Complex Path

I have introduced simple drawing paths before. This article introduces drawing polylines and Bezier curves. First, polylines are introduced. 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();

Introduced before

moveTo followed by the horizontal and vertical coordinates of the starting point, I tried it, the first one is lineTo is also possible. The following lineTo is to draw a straight line from this point to the next point, and then use this point as the starting point, and adjust lineTo is from the previous point to this point. If context.closePath(); is opened, the current line will be The point is connected to the earliest starting point to form a closed triangle. The effect is as follows:

Look at Besser below Er curve: There are two methods to realize Bezier curve:

quadraticCurveTo and bezierCurveTo, which are quadratic Bezier curve and cubic Bezier curve respectively. The difference between the Serre curve and the Quadratic Bezier curve is that the quadratic Bezier curve has only one peak, while the cubic Bezier curve has both peaks and troughs. First, let’s look at the quadratic Bezier 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();

The first is the starting point, it can also be

moveTo

or lineTo, and then call quadraticCurveTo. The first two parameters are the control point coordinates, and the last two parameters are It is the abscissa and ordinate of the end point. The abscissa of the control point is the same as the abscissa of the "wave crest". The ordinate of the wave crest is related to the ordinate of the wave crest. Note that they are related, that is, the larger the ordinate, the higher the wave crest. If you open context.closePath();, the effect is as follows:

## Let’s look at the cubic Bezier curve. First let’s look at the effect:

## The code is as follows: The three parameters of

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
//context.closePath();
context.stroke();

bezierCurveTo

are, respectively, the horizontal and vertical coordinates of the first or wave peak or trough, the horizontal and vertical coordinates of the second wave peak or trough, and the horizontal and vertical coordinates of the end point. , also open

context.closePath();

to also close the curve, the effect is as follows:

The above is the content of Html5 Canvas Preliminary Study Notes (10) - Complex Paths. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!