html5 Canvas drawing tutorial (8)—bezierCurveTo method for drawing curves in canvas_html5 tutorial skills

In the previous article, I have talked about three methods of drawing curves in canvas: arc, arcTo and quadraticCurveTo. They all have one thing in common, that is, they The curves you draw can only go to one side. The biggest difference between the bezierCurveTo we are talking about today and them is that it has two control points, which means you can draw an S-shaped curve.

bezierCurveTo, also known as Bezier curve, if you have learned certain drawing tools, you can understand it immediately.
The syntax of bezierCurveTo is as follows:
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); I will explain its parameters as usual, (x1,y1) is The coordinates of control point 1, (x2, y2) are the coordinates of control point 2, and (x, y) are the coordinates of its end point. Like quadraticCurveTo, its starting point coordinates are also preset by moveTo.

So, bezierCurveTo needs 4 points to draw a curve: starting point, end point, control point 1, control point 2. For the purpose of 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 have to mention the old problem of canvas drawing again, that is, the code drawing is all based on guessing, and you have to refresh to know where to draw.

I will continue the good tradition from before and draw some auxiliary lines to help everyone understand:

Copy code

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 point x
y = 500; // end point y
ctx.moveTo(300,300) ;//Starting 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 the end point and control point 2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// Connect the starting point and end point (baseline)
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();

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

Copy code

Code As follows:

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 on both sides of the baseline, an S-shaped curve will be drawn; if they are both on one side of the baseline, it will have an effect similar to quadraticCurveTo.
The situation in this example is relatively simple. The baseline line (from the starting point to the end point) is vertical. However, in practical applications, most of the time our baseline is slanted, and the situation is much more complicated. But try it yourself

Each drawing method seems to have a relatively single function, but powerful methods are the combination of individual methods. In subsequent articles, I will try to explain how to draw some conventional graphics, such as rounded rectangles and ellipses. They require a combination of these previous single methods.