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 參考
