HTML canvas(画布)arcTo()方法

arcTo()方法定义和用法

arcTo()方法在画布上的两个切线之间创建弧/曲线。

arcTo()方法浏览器支持

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（含）以上	支持	支持	支持	支持

arcTo()方法语法

context.arcTo(x1,y1,x2,y2,r);

arcTo()方法实例

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

尝试一下

arcTo()方法参数值

参数	描述
x1	第一个切线的x坐标
y1	第一个切线的y坐标
x2	第二个切线的x坐标
y2	第二个切线的y坐标
r	弧的半径

arcTo()方法相关页面

HTML教程：HTML脚本

HTML教程：HTML画布