例
繪製二次貝塞爾曲線：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke(); 試一試» 瀏覽器支持
在表中的數字指定完全支持方法的第一個瀏覽器的版本。
| 方法 | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 是 | 9 | 是 | 是 | 是 |
定義和用法
該quadraticCurveTo()方法使用表示二次貝塞爾曲線指定的控制點，增加了一個點到當前路徑。
二次貝塞爾曲線，需要兩個點。 第一點是在二次貝塞爾用於計算和第二點是對於曲線的結束點的控制點。 對於曲線的起點是在所述電流通路中的最後一個點。 如果一路徑不存在，則使用beginPath()和moveTo()方法來定義的起始點。
起點：
的moveTo（20,20） 控制點：
到quadraticCurveTo（20,100，200,20） 終點：
到quadraticCurveTo（20,100，200,20） 提示：退房bezierCurveTo()方法。它有兩個控制點而不是一個。
| JavaScript語法： | context.quadraticCurveTo(cpx,cpy,x,y); |
|---|
參數值
| 參數 | 描述 | 播放 |
|---|---|---|
| cpx | 貝塞爾控制點的x坐標 | 播放 ” |
| cpy | 貝塞爾控制點的y坐標 | 播放 ” |
| x | 終點的x坐標 | 播放 ” |
| y | 終點的y坐標 | 播放 ” |