Canvas arcTo() 方法
示例
在畫布上的兩條切線之間建立一個弧形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 開始一個路徑
ctx.beginPath();
ctx.moveTo(20, 20);
// 建立一條水平線
ctx.lineTo(100, 20);
// 建立一個弧形
ctx.arcTo(150, 20, 150, 70, 50);
// 建立一條垂直線
ctx.lineTo(150, 120);
// 繪製路徑
ctx.stroke();
自己動手試一試 »
更多示例見下文。
描述
arcTo() 方法在路徑的兩條切線之間新增一個弧形/曲線。
使用 stroke() 或 fill() 方法來繪製路徑。
另請參閱
beginPath() 方法 （開始一條新路徑）
closePath() 方法 （關閉當前路徑）
moveTo() 方法 （將路徑移動到指定點）
lineTo() 方法 （向路徑新增一條線）
fill() 方法 （填充當前路徑）
stroke() 方法 （繪製當前路徑）
arc() 方法（在路徑上新增一個圓）
bezierCurveTo() 方法 （向路徑新增一條貝塞爾曲線）
quadraticCurveTo() 方法 （向路徑新增一條二次貝塞爾曲線）
語法
| context.arcTo(x1, y1, x2, y2, r) |
引數值
| 引數 | 描述 | 試一試 |
|---|---|---|
| x1 | 弧形起點的 x 座標 | 試一試 » |
| y1 | 弧形起點的 y 座標 | 試一試 » |
| x2 | 弧形終點的 x 座標 | 試一試 » |
| y2 | 弧形終點的 y 座標 | 試一試 » |
| r | 弧形的半徑 | 試一試 » |
返回值
| 無 |
更多示例
示例
在兩條切線之間建立一個弧形並填充它
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 開始一個路徑
ctx.beginPath();
ctx.moveTo(20, 20);
// 建立一條水平線
ctx.lineTo(100, 20);
// 建立一個弧形
ctx.arcTo(150, 20, 150, 70, 50);
// 建立一條垂直線
ctx.lineTo(150, 120);
// 填充並繪製路徑
ctx.fill();
自己動手試一試 »
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
所有現代瀏覽器都支援 arcTo()。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
