[]html5 Canvas Drawing Tutorial (6) method of ArcTo in-canvas curve

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), ArcTo's parameters include two points, and these two points do not represent the point of the center, 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.

The code is as follows:

var x0=100, y0 =400=-----------"#f00"  = 2; Ctx.arcto (x1,y1,x2,y2) = "Rgba (0,0,0,0.5)"= 1; Ctx.moveto (X0,Y0); Ctx.lineto (X1,Y1); Ctx.filltext (' x1,y1 ', x1+10,y1+10) Ctx.lineto (x2,y2); Ctx.filltext (' x2,y2 ', x2+10

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!

The code is as follows:

//

, 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.
We continue to explore, the circle continues to grow, the starting point and the distance between the 1th shortened.

The code is as follows:

var //  ... ctx.arcto (x1,y1,x2,y2,//

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 point and circle.
There is a very important point in the ArcTo method, and this important point is the code (X1,Y1), 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.

The code is as follows:

var x0=100, y0=400=500

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.

[]html5 Canvas Drawing Tutorial (6) method of ArcTo in-canvas curve