Canvas bezierCurveTo() 方法
示例
繪製三次貝塞爾曲線
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
自己動手試一試 »
描述
bezierCurveTo() 方法透過使用代表三次貝塞爾曲線的控制點向路徑新增曲線。
使用 stroke() 或 fill() 方法來繪製路徑。
三次貝塞爾曲線需要三個點。前兩個點是用於三次貝塞爾計算的控制點，最後一個點是曲線的終點。曲線的起點是當前路徑的最後一個點。如果路徑不存在，請使用 beginPath() 和 moveTo() 方法定義一個起點。
起點：moveTo(20, 20)
控制點 1：bezierCurveTo(20, 100, 200, 100, 200, 20)
控制點 2：bezierCurveTo(20, 100, 200, 100, 200, 20)
終點：bezierCurveTo(20, 100, 200, 100, 200, 20)
注意
quadraticCurveTo() 方法 有一個控制點而不是兩個。
另請參閱
beginPath() 方法 （開始一條新路徑）
closePath() 方法 （關閉當前路徑）
moveTo() 方法 （將路徑移動到指定點）
lineTo() 方法 （向路徑新增一條線）
fill() 方法 （填充當前路徑）
stroke() 方法 （繪製當前路徑）
arc() 方法（在路徑上新增一個圓）
arcTo() 方法 （向路徑新增一個弧形）
quadraticCurveTo() 方法 （向路徑新增一條二次貝塞爾曲線）
語法
| context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
引數值
| 引數 | 描述 | 試一試 |
|---|---|---|
| cp1x | 第一個貝塞爾控制點的 x 座標 | 試一試 » |
| cp1y | 第一個貝塞爾控制點的 y 座標 | 試一試 » |
| cp2x | 第二個貝塞爾控制點的 x 座標 | 試一試 » |
| cp2y | 第二個貝塞爾控制點的 y 座標 | 試一試 » |
| x | 終點的 x 座標 | 試一試 » |
| y | 終點的 y 座標 | 試一試 » |
返回值
| 無 |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
bezierCurveTo() 在所有現代瀏覽器中都受支援
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
