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