HTML5 Canvas 完整测试 - 弧形

用 Canvas 绘制一条弧形或一个圆：

利用 Canvas 2D 的 arc 方法，可以绘制弧形，arc 弧形以一个点为中心，以固定的半径绘制：

javascript 代码
var cvs = document.getElementById("cvs");  // cvs 是 canvas 标签的 id
var pro = cvs.getContext("2d");
pro.beginPath();
pro.arc(100, 75, 50, 0, 1.5*Math.PI, false); 
// 参数：（x轴，y轴，半径，起始角度，结束角度，方向）
pro.strokeStyle = "red";  // 填充颜色
pro.stroke();  // 填充

Canvas 弧形

其中关于 arc 的第四，第五个参数，是圆的起始角度，以三点钟方向为起点（0），以 2 * pi 角度为一圈的终点。

图片引用w3cschool

arc 方法的默认绘制方向是顺时针，绘制方向可以用最后一个参数控制，默认为 false。
最后用 stroke 或 fill 描边或填充颜色即可完成轴心弧形的绘制。

上一篇 Context2D 图形库