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

Source: Internet
Author: User

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

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.