Html5 Canvas painting tutorial (8)-bezierCurveTo Method for drawing curves in canvas

Comments: Arc, arcTo, and quadraticCurveTo. they all have one thing in common, that is, the curves they draw can only be biased towards one side. The biggest difference between bezierCurveTo and bezierCurveTo today is that they have two control points, that is, they can draw an S-shaped curve, if you are interested, you can find out. In the previous article, I have already discussed three ways to draw curves in the canvas: arc, arcTo, and quadraticCurveTo. they all have one thing in common, that is, the curves they draw can only be biased towards one side. The biggest difference between bezierCurveTo and bezierCurveTo today is that they have two control points, that is, they can draw an S-shaped curve.

BezierCurveTo is the so-called beziercurve. If you have learned some drawing tools, you can understand them immediately.
BezierCurveTo Syntax::
Ctx. bezierCurveTo (x1, y1, x2, y2, x, y); his parameters are explained as an example. (x1, y1) is the coordinate of Control Point 1, (x2, y2) is the coordinate of control point 2, and (x, y) is his terminal coordinate. Like quadraticCurveTo, the coordinates of the start point are pre-set by moveTo.

Therefore, it takes four points for bezierCurveTo to draw a curve: Start Point, end point, control point 1, and Control Point 2. For subsequent explanations, we assume that control point 1 corresponds to the start point and Control Point 2 corresponds to the end point.
Here we need to mention the old problem of canvas painting again, that is, code drawing relies on guesses. You need to refresh the painting to understand where it is.

I continue with the excellent tradition and draw some guides to help you understand:

The Code is as follows:
Var x1 = 450, // x coordinate of Control Point 1
Y1 = 300, // y of Control Point 1
X2 = 450, // x of Control Point 2
Y2 = 500, // y of Control Point 2
X = 300, // end x
Y = 500; // end point y
Ctx. moveTo (300,300); // start point
Ctx. beginPath ();
Ctx. lineWidth = 5;
Ctx. strokeStyle = "rgba (0, 0, 1 )"
Ctx. moveTo (300,300 );
Ctx. bezierCurveTo (x1, y1, x2, y2, x, y );
Ctx. stroke ();
// Start to draw guides
Ctx. beginPath ();
Ctx. strokeStyle = "rgba (255,0, 0, 0.5 )";
Ctx. lineWidth = 1;
// Connection start point and Control Point 1
Ctx. moveTo (300,300 );
Ctx. lineTo (x1, y1 );
// Connection endpoint and Control Point 2
Ctx. moveTo (x2, y2 );
Ctx. lineTo (x, y );
// Connection start and end (baseline)
Ctx. moveTo (300,300 );
Ctx. lineTo (x, y );
Ctx. stroke ();

Here we first draw a curve similar to quadraticCurveTo, which only tends to one side. This line appears "round" because the x coordinates of Control Point 1 and 2 are the same.
Now draw another S-shaped curve to prove that bezierCurveTo is different:

The Code is as follows:
Var x1 = 150;
...

In fact, you only need to change the coordinates of control point 1. If the coordinates of Control Point 1 and Control Point 2 are on both sides of the baseline, the S-shaped curve is drawn. If both are on one side of the baseline, it is similar to quadraticCurveTo.
The case in this example is relatively simple. The baseline (from the start point to the end point) is vertical, but in practice, most of the baseline is skewed, which is much more complicated. But try it yourself.

Each drawing method seems to have a single function, but a powerful method is combined by a single method. In subsequent articles, I will try to explain some conventional image painting methods, such as rounded rectangle and elliptical shape. They need to combine these single methods.