html5制作圆弧,1.2 绘制圆弧 - HTML5 Canvas 实战

使用HTML5画布时，有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣，本节将是你努力的起点。

图1-3 绘制圆弧

绘制步骤

按照以下步骤绘制一条圆弧：

1. 定义2D画布并设置圆弧样式：

window.onload  = function(){

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

var context  = canvas.getContext("2d");

context.lineWidth  =  15;

context.strokeStyle  = "black";  //弧线颜色

2. 绘制圆弧：

context.arc(canvas.width  /  2, canvas.height  /  2  +  40,  80,  1.1  * Math.PI,  1.9  * Math.PI, false);

context.stroke();

};

3. 在HTML文档的body部分嵌入canvas标签：

工作原理

我们可以使用arc()方法来创建圆弧，圆弧被定义为假想的圆周上任意两点之间的部分。请看下图：