Canvas arcTo, canvasarcto

Canvas arcTo, canvasarcto

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);

The arcTo parameter includes two points, which do not represent the point of the center of the circle. The last parameter is the circle radius, indicating the relationship between the 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.

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 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 lineTo line is a translucent 1px black line,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, he formed an angle through the two straight lines at the starting point, 1st points, and 2nd points. These two lines are also the parameter circles.Tangent.

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!

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 isUnlimited extension.

At this time, the hook is longer than the handle.

We continue to explore, continue to increase the circle, and shorten the distance between the start point and the 1st point.

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.

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 your geometry is good, you can try to understandTangent equations of points and circles..

The arcTo method has a very important point. This important point is the x1 and 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) the distance will be reversed.

We can see that,(X2, y2)The coordinates of This vertex can be infinitely changed. As long as it is always a point on the tangent line, the image drawn by arcTo will not change with the radius of the circle unchanged. 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.

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.

In html 5, how does one use javascript to draw a smiling face in the canvas?

Use basic path API
Note that the cached path information will be drawn to the canvas only after fill or stroke is uploaded.
Function drawShape (){
Var canvas = document. getElementById ('your canvas id ');
If (canvas. getContext ){
Var ctx = canvas. getContext ('2d ');

Ctx. beginPath ();
Ctx. arc (75,75, 50,0, Math. PI * 2, true); // excircle
Ctx. moveTo (110,75 );
Ctx. arc (75,75, 35,0, Math. PI, false); // mouth
Ctx. moveTo (65,65 );
Ctx. arc (60, 65, 5, 0, Math. PI * 2, true); // left eye
Ctx. moveTo (95,65 );
Ctx. arc (90,65, 5, 0, Math. PI * 2, true); // right eye
Ctx. stroke ();

} Else {
Alert ('your browser does not support html5, please use chrome or Firefox safari .');
}
}

Canvas confusions in html5

Canvas is equivalent to an image, and the attribute set by css is equivalent to stretching the image. This method should be used to change the size of the canvas.
<Canvas width = 500 height = 400> </canvas>
The corresponding javascript is
Canvas = document. getElementsByTagName ('canvas ') [0];
Canvas. width = 500;
Canvas. height = 400;

In other words, the 1px line you draw is actually displayed in the default size after stretching and transformation.