HTML canvas arcTo () method
Examples
On the canvas to create an arc between two tangents between:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20); // Create a starting point
ctx.lineTo(100,20); // Create a horizontal line
ctx.arcTo(150,20,150,70,50); // Create an arc
ctx.lineTo(150,120); // Continue with vertical line
ctx.stroke(); // Draw it
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20); // Create a starting point
ctx.lineTo(100,20); // Create a horizontal line
ctx.arcTo(150,20,150,70,50); // Create an arc
ctx.lineTo(150,120); // Continue with vertical line
ctx.stroke(); // Draw it
try it"
Browser Support
Internet Explorer 9, Firefox, Chrome and Safari support arcTo () method.
Note: Opera does not support arcTo () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
arcTo () method creates between arc / curve between two tangents on the canvas.
Tip: Use the stroke () method to draw precise arcs on the canvas.
| JavaScript syntax: | context .arcTo (x1, y1, x2, y2, r); |
|---|
Parameter Value
| 参数 | 描述 |
|---|---|
| x1 | 弧的起点的 x 坐标。 |
| y1 | 弧的起点的 y 坐标。 |
| x2 | 弧的终点的 x 坐标。 |
| y2 | 弧的终点的 y 坐标。 |
| r | 弧的半径。 |
HTML canvas Reference Manual