Home  >  Article  >  Web Front-end  >  Using paths to draw second-order and third-order Bezier curves in HTML5 Canvas_html5 tutorial techniques

Using paths to draw second-order and third-order Bezier curves in HTML5 Canvas_html5 tutorial techniques

WBOY
WBOYOriginal
2016-05-16 15:46:511272browse

In HTML5 Canvas, you can use the following methods to draw third-order and second-order Bezier curves:


Copy code
The code is as follows:

context.bezierCurveTo(cp1x, cp1y, cp2x , cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

A Bezier curve is a curve defined on a two-dimensional plane by a "start point", an "end point", and one or more "control points". Ordinary third-order Bezier curves use two control points, while second-order curves use only one control point.

To draw a second-order Bezier curve, just set the coordinates of the end point and the coordinates of the control point:


Copy code
The code is as follows:

context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);

The code execution results are as follows:

The curve in the above example starts from coordinates (0,0) and ends at (0,50), and the coordinates of the control point used to control the curve drawing are (100,25).

Compared with second-order curves, the drawing of third-order Bezier curves is more flexible because two control points can be set. The following code draws an "S" shaped curve:

Copy the code
The code is as follows:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

Translation Note 1: Regarding Bezier curves, you can refer to the entry on Wikipedia (http://en.wikipedia.org/wiki/Bézier_curve). The animation in it well explains the generation mechanism of Bezier curves.

Annotation 2: Currently, HTML5 Canvas only supports up to third-order Bezier curves, and curves above fourth-order are not yet supported.

Statement:
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