html5 Canvas drawing tutorial (8) - bezierCurveTo method for drawing curves in canvas

In the previous article, I have talked about three ways to draw curves in canvas: arc, arcTo and quadraticCurveTo. They all have one thing in common, that is, the curves they draw can only be biased to one side. The biggest difference between bezierCurveTo mentioned today and they are that they have two control points, that is, they can draw an S-shaped curve.

bezierCurveTo, which is the so-called Bezier curve, if you have learned some drawing tools, you can understand it immediately.

ctx.bezierCurveTo(x1,y1,x2,y2,x,y); I will explain his parameters as usual. (x1,y1) is the coordinate of control point 1, (x2,y2) is the coordinate of control point 2, and (x,y) is the coordinate of its end point. Like quadraticCurveTo, its starting point coordinates are also pre-set by moveTo.

Therefore, bezierCurveTo draw a curve requires 4 points: starting point, end point, control point 1, control point 2. For the subsequent explanation, here I assume that control point 1 corresponds to the starting point and control point 2 corresponds to the end point

Here we will mention the old problem of canvas drawing, which means that the code drawing is all based on guessing, and you need to refresh the drawing to understand where you draw it.

I will continue the previous fine tradition and draw some auxiliary lines to help everyone understand:

var x1=450, //The 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 point x

y = 500;//end point y

ctx.moveTo(300,300);//Start point

ctx.beginPath();

ctx.lineWidth = 5;

ctx.strokeStyle = "rgba(0,0,0,1)"

ctx.moveTo(300,300);

ctx.bezierCurveTo(x1,y1,x2,y2,x,y);

ctx.stroke();

//Start drawing auxiliary lines

ctx.beginPath();

ctx.strokeStyle = "rgba(255,0,0,0.5)";

ctx.lineWidth = 1;

// Connect the starting point and control point 1

ctx.moveTo(300,300);

ctx.lineTo(x1,y1);

// Connect end point and control point 2

ctx.moveTo(x2,y2);

ctx.lineTo(x,y);

// Connect the start and end points (baseline)

ctx.moveTo(300,300);

ctx.lineTo(x,y);

ctx.stroke();

Here I first draw a curve similar to quadraticCurveTo, which is only biased to one side. This line appears to be relatively round because the x coordinates of control points 1 and 2 are the same.

Now draw an S-shaped curve to prove that bezierCurveTo is unique:

var x1 = 150;

...

In fact, just change the coordinates of control point 1. If the coordinates of control point 1 and control point 2 are respectively on both sides of the baseline, an S-shaped curve is drawn; if both are on one side of the baseline, it is an effect similar to quadraticCurveTo.

The situation of this example is relatively simple. The baseline (starting point to end point) is vertical, but most of the time in actual application, our baseline is oblique, so the situation is much more complicated. But let's try it yourself

Each drawing method looks relatively single in function, but the powerful method is combined by a single method. In the subsequent article, I tried to explain some common drawing methods, such as rounded rectangles and ellipses. They needed to combine these single methods in the past.