The previous article talked about the arc method of canvas, and this article talked about the arcTo method related to it.
arc and arcTo can be seen from the names of them. arcTo is also a method of drawing curves, and the curve he draws is also an arc of a perfect circle. But his parameters and arc are simply irrelevant~
ctx.arcTo(x1,y1,x2,y2,radius); arcTo parameters include two points, and there is no point representing the center of the circle in these two points. Only the last parameter is the radius of the circle, indicating that arcTo and the circle have a little relationship.
There are very few articles about arcTo online, and I finally found one that was a foreign one; and there is no intuitive tool for canvas drawing, so I can only guess, arcTo made me guess for a long time. .
For an intuitive description, I took an auxiliary method: wherever arcTo is drawn, I used lineTo to draw the corresponding points to see their relationship. Just draw auxiliary lines.
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.lineTo(x2,y2);
ctx.fillText('x2,y2',x2+10,y2)
ctx.stroke();
It seems that there is a lot of code, but it is actually very simple. I used several variables to save coordinate values, and the rest were canvas operations.
Variable description: x0, y0 is the starting point coordinate, x1, y1 is the first point coordinate, and x2, y2 is the second point coordinate. The straight line drawn by lineTo is a translucent 1px black line, and the line drawn by arcTo is a 2px red line.
Refresh the page and you will see the picture below.
I have to say that this red line looks like a hook.
So the law of arcTo was found. It actually formed an angle through the two straight lines at the starting point, point 1 and point 2, and these two lines are also the tangent lines of the parameter circle.
The radius of the circle determines where the circle will cleave edges with the line. It’s like a ball rolling 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 is true.
This is a very serious academic issue, so don’t want YY.
Let's make the ball bigger!
ctx.arcTo(x1,y1,x2,y2,50); //The radius is changed to 50
As shown in the figure, you can see that the arc has become large and is not even tangent to the straight line.
Of course, they are actually still tangent because the tangent is infinitely extended.
We continue to explore, continue to grow the circle, and shorten the distance between the starting point and the first point.
var x0=400; //The starting point x coordinate changes from 100 to 400
...
ctx.arcTo(x1,y1,x2,y2,100); //The radius of the circle becomes larger to 100 and you will see such a strange figure.
It was originally a hook, but now it has been bent and turned to the opposite direction! It's a bit like a wine bottle holder.
However, please note that this circle is still tangent to the two lines! But now the length of the two lines cannot satisfy this circle! He has extended both wires wirelessly!
When will this hook handle be reversed? If you have good geometry, you can try to understand the tangent equations of points and circles.
There is a very important point in the arcTo method. This important point is (x1, y1) in the code. As long as the distance from it to the tangent point of the circle exceeds the distance from it to the starting point (x0, y0), it will reverse.
From the figure we can see that the coordinates of this point (x2,y2) can change infinitely. As long as it is always a point on the tangent, then the graph drawn by arcTo will not change at all when the radius of the circle remains unchanged. This requires special attention.
Let me use my geometric knowledge that I can't get on the table to verify this proposition. For the sake of calculation, I first changed the angle between the two lines to 90 degrees.
var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
After the change, it will be opened 90 degrees! We keep the radius of the ball unchanged. After refreshing:
We make y2 bigger, that is, extend a tangent line, turn it into 550, and refresh:
The tangent line is extended, but the red line drawn by arcTo has not changed at all.