[]html5 Canvas Drawing Tutorial (8) method of Beziercurveto in-canvas curve

In the previous article I have already talked about 3 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, and today's Beziercurveto and their biggest difference is that they have two control points that can draw an S-shaped curve.

Beziercurveto, the so-called Bezier curve, can be understood immediately if you have learned some drawing tools.
The syntax for Beziercurveto is as follows :
Ctx.beziercurveto (x1,y1,x2,y2,x,y); his parameters I explain as usual, where (x1,y1) is the coordinates of the control point 1, (X2,Y2) is the coordinates of Control point 2, (x, y) is his terminal coordinates. As with Quadraticcurveto, his start-up coordinates were set in advance by MoveTo.

So, it takes 4 points for the Beziercurveto to draw a curve: Starting point, end point, Control point 1, Control Point 2. For further explanation, here I assume that the control point 1 corresponds to the starting point, and the control point 2 corresponds to the end point
Here again to mention canvas drawing of the old problem, is the code to draw all by guessing, where you want to refresh the picture to understand.

I still continue the fine tradition of the previous, drawing some auxiliary lines to help you understand:

The code is as follows:

varX1=450,//x-coordinate of Control point 1Y1 = 300,//y of Control point 1x2 = 450,//x of Control point 2y2 = 500,//y of Control point 2x = 300,//End xy = 500;//End yCtx.moveto (300,300);//starting pointCtx.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 GuidesCtx.beginpath (); Ctx.strokestyle= "Rgba (255,0,0,0.5)"; Ctx.linewidth= 1; //connecting the start point and control point 1Ctx.moveto (300,300); Ctx.lineto (X1,Y1); //connecting endpoints and Control points 2Ctx.moveto (x2,y2); Ctx.lineto (x, y);//Connect start and End (baseline)Ctx.moveto (300,300); Ctx.lineto (x, y); Ctx.stroke (); 

Here we draw a curve similar to the Quadraticcurveto, which only leans to one side. This line appears to be "rounded" because the x-coordinate of Control point 1 and 2 is the same.
Now draw an S-shaped curve to prove that Beziercurveto is different:

The code is as follows:

var x1 = 150

In fact, just change the coordinates of the control point 1 a bit. If the coordinates of Control point 1 and Control point 2 are on both sides of the baseline, the curve of the S-shape is drawn, and if it is on one side of the baseline, it is similar to the Quadraticcurveto effect.
The case is relatively simple, the base line (the starting point to the end point) is vertical, but most of the time the actual application of our baseline is oblique, it is more complicated. But let's try it on our own.

Each method of drawing seems to have a single function, but a powerful approach is a combination of individual methods. Follow-up article I try to explain some of the conventional patterns of drawing, such as rounded rectangles, ellipses, they need to combine these single methods previously.

[]html5 Canvas Drawing Tutorial (8) method of Beziercurveto in-canvas curve