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

Arc and ArcTo are similar from name to title. ArcTo is also a way of drawing curves, and the curves he draws are also arcs of a circle. But his parameters and arc are absolutely mortal.

Ctx.arcto (X1,y1,x2,y2,radius);

The ArcTo parameter includes two points, and the points in the two points do not represent the center point, only the last parameter is the radius of the circle, indicating that ArcTo and the circle have a little relationship.

Online about ArcTo article very few, very hard to find an article or foreign, and canvas drawing wood has intuitive tools, only by guessing, arcto harm I guess for a long while.

For the sake of the visual description, I took an auxiliary approach: where ArcTo draws, I use LineTo to draw the corresponding points to see their relationship. is drawing auxiliary lines.

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

var x0=100, Y0=400, X1=500, Y1=400, X2=450, Y2=450; CTx.Beginpath(); CTx.MoveTo(x0, y0); CTx.Strokestyle="#f00"; CTx.LineWidth=2; CTx.ArcTo(x1, y1, x2, y2,20); CTx.Stroke(); CTx.Beginpath(); CTx.Strokestyle="Rgba (0,0,0,0.5)"; CTx.LineWidth=1; CTx.MoveTo(x0, y0 CTx. lineto (X1,y1 CTx. filltext ( ' x1,y1 ' ,x1+ 10,y1+10) Ctx.< Span class= "me1" >lineto (X2,y2 CTx. filltext ( ' x2,y2 ' ,x2+ 10,y2) Ctx. Stroke

It seems that the code is a bit more, actually very simple. I used several variables to save the coordinate values, and the rest was the canvas's operation.

Variable Description: X0,y0 is the starting point coordinate, x1,y1 is the first point coordinate, and X2,y2 is the second point coordinate. One of the LineTo is a translucent 1px black line, the ArcTo line is a 2px red line.

Refresh the page to see it.

I have to say that the red line is like a hook.
So the law of ArcTo found, he is actually through the starting point, the 1th, 2nd two straight lines, formed an angle, and these two lines, is also the tangent of the parameter circle.

The radius of the circle determines where the circle will be tangent to the line. Just like a ball to a dead corner inside the roll, the smaller the ball will go in, the more close to the dead, the ball is large and vice versa.

This is a very serious academic problem, we can not yy.

Let's get the ball bigger!

1	CTx. arcto(x1, y1, X2, y2,); //Radius changed to

, you can see that the arcs are so large that they are not even tangent to the line.

Of course, they are actually tangent, because the tangent is infinitely extended.

But then the hook becomes longer than the handle.

We continue to explore, the circle continues to grow, the starting point and the distance between the 1th shortened.

1 2 3

var x0< Span class= "sy0" >=400; //beginning x coordinate from 100 to ... ctx. Arcto (X1,y1,x2,y2,< Span class= "nu0" >100) ; //the radius of the circle becomes greater than

And then you'll see a strange figure.

Originally is a hook, now be abruptly bend, also broke to the opposite direction! It's kind of like a bottle rack.

However, you see, this circle is still tangent to two lines! Just now the length of the two lines can not meet the circle! He's already wired up both lines!

When does this hook handle reverse? If you have a good geometry, you can try to understand the tangent equation of points and circles.

There is an important point in the ArcTo method, the important point is that the x1,y1 in the code, as long as he to the circle tangent distance, more than his distance to the starting point (x0,y0), the reversal occurs.

As we can see, the coordinates of this point can be infinitely varied, so long as he is always a point on the tangent, then the shape of the arcto will not change if the radius of the circle is constant. This requires special attention.

Let me validate this proposition with the geometrical knowledge that I do not take to the stage. To facilitate the calculation, I first changed the angle of the two lines to 90 degrees.

1 2 3 4 5 6

var x0=. Y0=. X1 = . Y1 = . x2 = . Y2 = ;

After the change is 90 degrees open yo! We keep the radius of the ball constant. After refresh:

We make y2 bigger, that is, extending a tangent, turning him into 550, after the refresh:

The tangent is extended, but the ArcTo draws no change in the red line.

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