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:

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.