Use the path in HTML5 Canvas to describe the second-and third-order besell curves. html5canvas

Use the path in HTML5 Canvas to describe the second-and third-order besell curves. html5canvas
This article describes how to use paths in HTML5 Canvas to draw second-and third-order besell curves. This article provides implementation code, examples, and explanations. For more information, see

In HTML5 Canvas, you can use the following method to describe the third-and second-order besell curves:

The Code is as follows:
Context. bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)
Context. quadraticCurveTo (cpx, cpy, x, y)

The beiser curve is a curve defined by a "starting point", an "ending point", and one or more "Control Points" on a two-dimensional plane. The common third-order besell curve uses two control points, while the second-order Curve uses only one control point.

To draw a second-order besell curve, you only need to set the coordinates of the end point and the coordinates of the control point:

The Code is as follows:
Context. moveTo (0, 0 );
Context. quadraticCurveTo (, 25 );

The code execution result is as follows:

The curve in the preceding example starts from the coordinate (0, 0) and ends at (0, 50), and the coordinate of the control point used to control the curve plotting is ).

Compared with the second-order curve, because two control points can be set, the plotting of the Third-Order besell curve is more flexible. The following code depicts a "S" curve:

The Code is as follows:
Context. moveTo (150,0 );
Context. bezierCurveTo (0,125,300,175,150,300 );

For more information about the beiser curve, see the entries on Wikipedia (http://en.wikipedia.org/wiki/bw.zier_curve). The animation provides a good explanation of the beiser curve generation mechanism.

NOTE 2: currently, HTML5 Canvas supports only three-level besell curves. curves above four levels are not supported yet.