Html5 Canvas painting tutorial (6)-arcTo Method for drawing curves in canvas

Comments: Arc and arcTo are similar in names. ArcTo is also a method for drawing curves, and the curve drawn by arcTo is also an arc of a positive circle. However, his parameters and arc are almost out of the box ~, If you are interested, let's take a look at the application of the arcTo method. In the previous article, we talked about the canvas arc method, which is related to its arcTo method.
The arc and arcTo are similar in names. ArcTo is also a method for drawing curves, and the curve drawn by arcTo is also an arc of a positive circle. However, his parameters and arc are almost out of the box ~
Ctx. arcTo (x1, y1, x2, y2, radius); arcTo parameters include two points, and these two points do not represent the center of the center, only the final parameter is the circle radius, indicating the relationship between arcTo and the circle.
There are very few articles about arcTo on the Internet, so it is hard to find one in a foreign country. In addition, canvas has an intuitive tool and can only rely on guesses. arcTo has hurt me for a long time ..
To provide an intuitive description, I adopted an auxiliary method: Where arcTo draws, I used lineTo to draw corresponding points to view their relationships. Draw guides.

The Code is as follows:
Var x0 = 100,
Y 0 = 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.5, 0 )";
Ctx. lineWidth = 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, y2)
Ctx. stroke ();

It seems that there are a lot of code, but it is actually very simple. I used several variables to save the coordinates, and the rest were canvas operations.
Description of variables: x0, y0 is the starting point coordinate, x1, y1 is the first point coordinate, x2, y2 is the second point coordinate. The line drawn by lineTo is a translucent 1px black line, and the line drawn by arcTo is a 2px red line.
Refresh the page to see.

I have to say that this red line is like a hook.
As a result, arcTo's law was discovered. In fact, it formed an angle through two straight lines at the starting point, 1st points, and 2nd points. These two lines are also the tangent of the parameter circle.
The radius of the circle determines the position of the circle and the cutting edge of the line. It is like rolling a ball into a dead corner. The smaller the ball, the more it rolls in, the closer it gets to the dead corner. The larger the ball, the opposite.
This is a very serious academic issue.
Let's make the ball bigger!

The Code is as follows:
Ctx. arcTo (x1, y1, x2, y2, 50); // change the radius to 50.

, You can see that the arc is becoming very large, or even not tangent to a straight line.
Of course, they are still tangent, because the tangent is infinitely prolonged.
We continue to explore, continue to increase the circle, and shorten the distance between the start point and the 1st point.

The Code is as follows:
Var x0 = 400; // The x coordinate of the start point changes from 100 to 400.
...
Ctx. arcTo (x1, y1, x2, y2, 100); // the radius of the circle increases to 100 and then you will see such a strange figure.

It was originally a hook. Now it's being bent, and it's in the opposite direction! It's a bit like a bottle holder.
However, please note that this circle is still tangent to two lines! But the length of the two lines cannot meet this circle! He has extended the two wires wirelessly!
When will this hook handle be reversed? If you have a good geometric structure, you can try to understand the tangent equation between a vertex and a circle.
The arcTo method has a very important point. This important point is (x1, y1) in the Code. As long as the distance from him to the tangent of the circle exceeded him to the starting point (x0, y0.
We can see that the coordinates of the (x2, y2) point can be infinitely changed. As long as it is always a point on the tangent line, the radius of the circle remains unchanged, the image drawn by arcTo will not change. Pay special attention to this.
Let me use the geometric knowledge I can't get on the table to verify this proposition. For ease of calculation, I first change the angle between the two lines to 90 degrees.

The Code is as follows:
Var x0 = 100,
Y 0 = 400,
X1 = 500,
Y1 = 400,
X2 = 500,
Y2 = 450;

The change is 90 degrees open! We keep the ball radius unchanged. After refreshing:

We extended y2, that is, extended a tangent, and changed it to 550. After refreshing:

 
The tangent is extended, but the red line drawn by arcTo remains unchanged.