Home > Article > Web Front-end > Using paths to draw second-order and third-order Bezier curves in HTML5 Canvas_html5 tutorial techniques
In HTML5 Canvas, you can use the following methods to draw third-order and second-order Bezier curves:
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:
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:
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.