Home > Web Front-end > H5 Tutorial > Html5 Canvas Preliminary Study Notes (10) - Complex Path

Html5 Canvas Preliminary Study Notes (10) - Complex Path

黄舟
Release: 2017-02-28 15:53:45
Original
1493 people have browsed it

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();
Copy after login

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();
Copy after login

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();
Copy after login
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 (m.sbmmt.com)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template