html5 arcto,canvas中的arcTo()方法

arcTo()方法与arc()方法在外观和功能上虽有类似之处，但还是有很大的差别。

两者不同之处在于：

(1).arcTo()方法是介于两条切线之间的圆弧。

(2).arc()方法是绘制圆弧。

(3).arcTo()参数比较多，arc()参数相对来说比较少。

简单的来说arcTo()方法就是根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

arcTo(x1, y1, x2, y2, radius)

参数：

x1：两条切线交点的横坐标

y1：两条切线交点的纵坐标

x2：第二条切线上一点的横坐标

y2：第二条切线上一点的纵坐标

radius：是弧的半径

浏览器兼容：

(1). Chrome支持此方法。

(2).IE/Edge中9.0版本支持此方法。

(3).火狐浏览器支持此方法。

(4).Opera浏览器支持此方法。

(5).Safari浏览器支持此方法。

那如何用此方法画圆弧呢？

思路分析如下：

(1).起点与第一控制点连接成一条直线也就是第一条切线。

`(2).第一控制点与第二控制点连接成一条直线也就是是第二条切线。

(3).当前端点与圆的半径可以绘制一个与直线相切的圆弧。

(4).最后让起点与圆弧相连接。

注意：起点是moveTo(x,y);当前端点是lineTo(x,y)

具体代码如下：

Document

$(function(){

draw();

function draw(){

// 获取canvas对象

var canvas = $('#canvas')[0];

// 检测浏览器是否支持canvas

if (!canvas.getContext) {

console.log('浏览器不支持canvas');

return false;

}

var xt = canvas.getContext('2d');

// 指定绘制路径的起点

xt.moveTo(20,150);

// 绘制一条到坐标(70,150)的水平直线  当前端点

xt.lineTo(70,150);

// 第一控制点(480,150)  第二控制点(480,400)  半径为300 两个控制点一样是因为两点在一条直线上

xt.arcTo(480,150,480,400,300);

xt.lineTo(480,500);

// 设置线条的颜色为蓝色

xt.strokeStyle = 'blue';

// 描边

xt.stroke();

}

})

代码运行效果如下：

如果出现了起点坐标恰好位于当前端点之上的情况，就可以绘制一个圆弧。

如果不明白moveTo()和lineTo()的请自行查阅canvas，具体代码有注释还有不懂的可以来问我，我们一起探讨。