[HTML canvas Beziercurveto] Canvas drawing beziercurveto () attribute study example Demo

In the previous article I've 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 tilted aside, Today's Beziercurveto and their biggest difference is that there are two control points, that is, you 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:

1	Ctx.beziercurveto (X1,y1,x2,y2,x,y);

His parameters I explain as usual, where (x1,y1) is the coordinates of 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:

1 2 3 4 5 6 7 8 9 Ten One A - - the - - - + - + A at - - - -

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 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, y2XY); CTx.Stroke(); Start drawing Guides CTx.Beginpath(); CTx.Strokestyle="Rgba (255,0,0,0.5)"; CTx.LineWidth=1; Connecting the start point and Control point 1 CTx.MoveTo(300,300); CTx.lineto (X1,y1 //connection end point and Control point 2 Ctx.,y2 CTx. lineto (X,y //Connect start and End (baseline) Ctx. (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:

1 2	var x1 = ; ...

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.

[HTML canvas Beziercurveto] Canvas drawing beziercurveto () attribute study example Demo