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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.