html5中arcto,HTML5 canvas arcTo() 方法

1.HTML5 canvas arcTo() 用于在画布上创建介于两个切线之间的弧。但是要注意请使用 stroke() 方法在画布上绘制确切的弧。如下图所示：

2.arcTO()的JS：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.beginPath();

ctx.moveTo(20,20);// 创建开始点

ctx.lineTo(100,20);// 创建水平线

ctx.arcTo(150,20,150,70,50);// 创建弧

ctx.lineTo(150,120);// 创建垂直线

ctx.stroke();// 进行绘制

3.JavaScript 语法：context.fillRect(x1,y1,x2,y2,r);

x1表示弧的起点的 x 坐标，y1表示弧的起点的 y 坐标，x2表示弧的终点的 x 坐标,y2表示弧的终点的 y 坐标

r表示弧的半径。

所有代码如下：

$(function(){

draw();

function draw(){

var canvas = $('#canvas')[0];//转化为JS原生DOM元素

if(!canvas.getContext){

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

return false;

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

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

//获取canvas绘图的上下文：画笔

ctx.beginPath();

ctx.moveTo(20,20);          // 创建开始点

ctx.lineTo(100,20);          // 创建水平线

ctx.arcTo(150,20,150,70,50); // 创建弧

ctx.lineTo(150,120);        // 创建垂直线

ctx.stroke();                // 进行绘制

}

})