Using paths in HTML5 canvas to depict the second-order, Sanche Besel curves

In HTML5 canvas, three-and second-order Bezier curves can be depicted in the following ways:

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 by a "starting point", an "end point", and one or more "control points" on a two-dimensional plane. The normal Sanche Besel curve uses two control points, while the second-order curve uses only one control point.

To paint the Hill Bessel curve, simply set the coordinates of the end point and the coordinates of the control points:

The code is as follows:

Context.moveto (0,0);

Context.quadraticcurveto (100,25,0,50);

Code execution results are as follows:

The curve in the example above starts at the coordinates (0,0) and ends (0,50), while the coordinates for the control points depicted by the curve are (100,25).

The Sanche Besel curve is more flexible than the second-order curve because it can set two control points. The following code paints an "S"-shaped curve:

The code is as follows:

Context.moveto (150,0);

Context.beziercurveto (0,125,300,175,150,300);

1: With regard to Bezier curves, you can refer to the Wikipedia entry (Http://en.wikipedia.org/wiki/bézier_curve), where the animation is a good illustration of the generation mechanism of Bezier curves.

2: At present, HTML5 Canvas only supports Sanche Besel curve, and the curve above four-order is not supported