用 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 圖形庫