HTML5 Bezier curves in the canvas

In the canvas feature provided by HTML5, which is the canvas, the GetContext () method returns an object that provides methods and properties for drawing on the canvas. Taking the method provided in GetContext ("2d") as an example, this paper briefly studies the Bezier curve which is used to draw the curve path.

The GetContext ("2d") in JavaScript gives us two ways to draw Bezier paths, Quadraticcurveto () for plotting two Bezier curves and Beziercurveto () for plotting three Bezier curves.

What is a Bezier curve?

Bezier curve (Bézier curve), also known as Bézier curve or Bézier curve, is a mathematical curve applied to two-dimensional graphic application, which is a very important parameter curve in computer graphics.

The Bezier curve is composed of a segment and a node, which controls the nodes and can control the path of the curve. The specific parametric equation is as follows:

(1) Linear formula

Given the point P0, P1 (which can be understood as the start and end of the curve), the linear Bezier curve is just a straight line between two points. The formula is as follows:

Its length equals the length of the segment between two points.

(2) Two-square formula

The path of the quadratic Bezier curve is traced by the function B (t) of the given point P0, P1, P2 (which can be understood as the starting point, control Point, and end point respectively):

(3) three-square formula

P0, P1, P2, P3 Four points are defined in the plane or in three-dimensional space in three square Bezier curves. The curve starts at P0 toward P1, and comes from the direction of P2 to P3. Generally do not go through P1 or P2, these two points are just there to provide direction information. The spacing between P0 and P1 determines the "length" of the curve toward the P2 direction before it turns into P3.

The parameter form of the curve is:

2. How to draw Bezier curves in canvas

Draw a Bezier curve of two times

In canvas, we can use the Quadraticcurveto () method provided by GetContext ("2d") to draw two Bezier curves.

As we know from the previous section, to draw a two-time Bezier curve, you need to know the coordinates of the three control points, that is, the coordinates of the P0 start point, the P1 control point, and the P2 endpoint. In canvas, we use the MoveTo () method to determine the starting point, namely MoveTo (X0,Y0), where x0 is the beginning of the horizontal axis, and Y0 is the vertical axis of the starting point. The control point and the endpoint coordinates are determined in the Quadraticcurveto () method, specifically Quadraticcurveto (cpx,cpy,x,y), where CPX and cpy are the horizontal ordinate of the control point, and X and y are the horizontal ordinate of the end point.

Therefore, using the MoveTo () and Quadraticcurveto () methods continuously, we can get a two-time Bezier curve.

Draw a Bezier curve of three times

In canvas, we can use the Beziercurveto () method provided by GetContext ("2d") to draw three Bezier curves.

The three-time Bezier curve requires four-point coordinates to determine the starting point, the control point 1, the control point 2, and the endpoint coordinates. Similar to the two-time Bezier curve, the three-time Bezier curve is also used continuously by moveto () and Beziercurveto (). MoveTo (X0,Y0) is still responsible for the starting coordinates, while Beziercurveto (Cp1x,cp1y,cp2x,cp2y,x,y) is responsible for control point 1, Control point 2, and endpoint coordinates in turn.

To sum up, in the canvas, we can easily get the desired Bezier curve by using the three methods of MoveTo (), Quadraticcurveto () and Beziercurveto (). If a point on the curve is known, it can also be calculated by the formula provided in this article (substituting elimination parameter T) to derive the coordinate of the control point, and then draw with the above method.

HTML5 Bezier curves in the canvas