Earlier you learned how to use CanvasRenderingContext2Dobjects arc()to draw arcs or circles.
Today, we continue to introduce the usage CanvasRenderingContext2Dof the methods of objects .arcTo()
arcTo(x1, y1, x2, y2, radius)
arcTo()The method will use the angle formed by the current endpoint, endpoint 1 (x1,y1), and endpoint 2 , and then draw an arc on a circle that is (x2,y2)tangent to both sides of the angle and has a radius of . The starting point of the arc is the tangent point between the edge of the current endpoint and the circle, the end point of the arc is the tangent point between the edge where radiusendpoint 2 is located and the circle, and the drawn arc is the arc with the shortest length between the two tangent points. (x2,y2)Also, if the current endpoint is not the arc start point, the arcTo()method will also add a straight line segment from the current endpoint to the arc start point.
The above literal explanation may not be easy to understand, we'd better combine the actual code example to help understanding, please refer to the following code first
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas arcTo() getting started example of drawing arcs</title>
</head>
<body>
<!-- Add canvas tag with red border for easy viewing on the page-->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
Your browser does not support the canvas tag.
</canvas>
<script type="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){
//Get the corresponding CanvasRenderingContext2D object (brush)
var ctx = canvas.getContext("2d");
//Specify the starting point of the drawing path
ctx.moveTo(50, 50);
//Draw a horizontal line to coordinates (150,50)
ctx.lineTo(150, 50);
//The coordinate point (150,50) is the current endpoint when drawing the arc
//endpoint 1
var p1 = {
x : 200,
and : 50
};
//endpoint 2
var p2 = {
x : 200,
and : 100
};
//Draw an arc of a circle with a radius of 50px that is tangent to both sides of the angle formed by the current endpoint, endpoint 1, and endpoint 2
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
//set the line color to blue
ctx.strokeStyle = "blue";
//Draw the arc according to the above drawing path
ctx.stroke();
}
</script>
</body>
</html>
The corresponding display effect is as follows (the blue part in the figure is the actual drawing effect)
Arc drawn using canvas arcTo()
As shown in the figure above, since arcTo()the endpoint where the "brush" is located when using the drawing arc is (150,50), so the coordinate point (150,50)is the current endpoint, and then we specify endpoint 1 and endpoint 2 arcTo()in the parameters of the method , so we will draw the same as these three An arc on a circle with a radius of 50px and the two sides of the angle formed by the endpoints are tangent. In addition, the two tangent points on both sides of the angle that are tangent to the circle divide the circle into two arcs, one is the 1/4 arc drawn in the above figure, and the other is the remaining 3/4 arc. The arc will be drawn in the direction of the shortest arc, so the drawn arc is the shorter 1/4 arc.(200,50)(200,100)arcTo()arcTo()
In the above example, since the three endpoints we set are special, the current endpoint and endpoint 2 are actually the tangent points between the circle where the arc is located and the two sides of the corresponding included angle. That is, the current endpoint is on the circle the arc is on, and is the starting point of the arc being drawn. Now, let's look at the case where the current endpoint is not the starting point of the arc:
<script type="text/javascript">
//Get the Canvas object (canvas)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){
//Get the corresponding CanvasRenderingContext2D object (brush)
var ctx = canvas.getContext("2d");
//Specify the starting point of the drawing path
ctx.moveTo(50, 50);
//Comment out lineTo(), no longer draw the line first
//ctx.lineTo(150, 50);
//At this point, the coordinate point (50,50) is the current endpoint when drawing the arc
//endpoint 1
var p1 = {
x : 200,
and : 50
};
//endpoint 2
var p2 = {
x : 200,
and : 100
};
//Draw an arc of a circle with a radius of 50px that is tangent to both sides of the angle formed by the current endpoint, endpoint 1, and endpoint 2
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
//set the line color to blue
ctx.strokeStyle = "blue";
//Draw the arc according to the above drawing path
ctx.stroke();
}
</script>
The corresponding display effect is as follows
Graphic effect when the current endpoint is not the starting point of the arc
By observing the display effect above, you will find that this is exactly the same as the display effect of our first code example. In the sample code here, we did not draw a straight line first, but when drawing an arc, the starting point here (50,50)is the current endpoint, so the angle formed by the starting point , endpoint 1 , and endpoint 2 arcTo()will be used , Then draw an arc tangent to both sides of the included angle. Since the line where the starting point and endpoint 1 are located is actually the same line as the line where the current endpoint and endpoint 1 are located in the first example , the drawn arc is still the same. The difference is that the current endpoint is not the starting point of the arc, and a straight line from the current endpoint to the starting point of the arc will be automatically added. Thus, we see the exact same graphical effect as the first example code.(50,50)(200,50)(200,100)(50,50)(200,50)(150,50)(200,50)arcTo()