Canvas arc() 方法
示例
建立一個圓形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
自己動手試一試 »
更多示例見下文。
描述
arc() 方法向路徑新增一個弧形（曲線）。
arc() 方法建立一個圓形或圓形的一部分。
使用 stroke() 或 fill() 方法來繪製路徑。
中心：arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
起始角度：arc(100, 75, 50, 0, 1.5 * Math.PI)
結束角度：arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
注意
要建立一個圓形：將起始角度設定為 0，結束角度設定為 2*Math.PI。
要建立半圓形：將起始角度設定為 0，結束角度設定為 Math.PI。
另請參閱
beginPath() 方法 （開始一條新路徑）
closePath() 方法 （關閉當前路徑）
moveTo() 方法 （將路徑移動到指定點）
lineTo() 方法 （向路徑新增一條線）
fill() 方法 （填充當前路徑）
stroke() 方法 （繪製當前路徑）
arcTo() 方法 （向路徑新增一個弧形）
bezierCurveTo() 方法 （向路徑新增一條貝塞爾曲線）
quadraticCurveTo() 方法 （向路徑新增一條二次貝塞爾曲線）
語法
| context.arc(x, y, r, sAngle, eAngle, counterclockwise) |
引數值
| 引數 | 描述 | 試一試 |
|---|---|---|
| x | 圓心的 x 座標 | 試一試 » |
| y | 圓心的 y 座標 | 試一試 » |
| r | 圓的半徑 | 試一試 » |
| sAngle | 起始角度，以弧度表示（0 位於弧形圓的 3 點鐘位置） | 試一試 » |
| eAngle | 結束角度，以弧度表示 | 試一試 » |
| counterclockwise | 可選。指定繪製方向是逆時針還是順時針。預設為 false，表示順時針，而 true 表示逆時針。 | 試一試 » |
返回值
| 無 |
更多示例
示例
繪製一個橙色圓形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
arc() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
