Check to be sure there’s a subpath for (x1, y1). Then, the behavior depends on the arguments and the last point in the subpath. See Notes.
Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D
Syntax object.arcTo(x1, y1, x2, y2, radius);
The x-coordinate for the first tangent that intersects with the current path point.
y1The y-coordinate for the first tangent that intersects with the current point.
x2The x-coordinate for the second tangent that intersects with the x1 and y1 points.
y2The y-coordinate for the second tangent that intersects with the x1 and y1 points.
radiusThe radius of the arc to create.
Return ValueNo return value
ExamplesThis example creates an arc
<html>
<head>
<title>ArcTo example</title>
</head>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "blue";
ctx.moveTo(80, 100);
ctx.lineTo(240, 100);
ctx.moveTo(200, 60);
ctx.lineTo(200, 220);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = "5";
ctx.moveTo(120, 100);
ctx.lineTo(180, 100);
ctx.arcTo(200, 100, 200, 120, 20);
ctx.lineTo(200, 180);
ctx.stroke();
ctx.translate(0, 220);
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = "3";
ctx.moveTo(200, 60);
ctx.lineTo(200, 220);
ctx.moveTo(220, 80);
ctx.lineTo(120, 180);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = "5";
ctx.moveTo(120, 100);
ctx.lineTo(180, 100);
ctx.moveTo(180, 120);
ctx.arcTo(200, 100, 200, 120, 20);
ctx.lineTo(200, 180);
ctx.stroke();
}
}
</script>
<body onload="draw();">
<canvas id="myCanvas" width="300" height="600">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
The arcTo method creates an arc of radius radius between two tangents. The first tangent is defined by an imaginary line that is drawn through the last point in a path and the point (x1, y1). The second tangent is defined by an imaginary line that is drawn through the point (x1, y1) and the point (x2, y2).
The arc is drawn between the two tangents using radius as the radius. arcTo will draw a straight line from the last point of the path to the start of the arc which lies on the tangent that contains the last point on the path and x1 and y1.
Related specificationsMicrosoft Developer Network: Windows Internet Explorer API reference Article
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4