例
繪製二次貝塞爾曲線：
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() | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
的quadraticCurveTo()方法通過使用表示一個二次貝塞爾曲線指定的控制點增加了一個點到當前路徑。
二次貝塞爾曲線需要兩個點。 第一點是在二次貝塞爾計算中使用和第二點是對於曲線終點的控制點。 對於曲線的起點是在當前路徑的最後一個點。 如果路徑不存在，使用beginPath()和moveTo()方法來定義一個起點。
起點：
moveTo( 20,20 ) 控制點：
quadraticCurveTo( 20,100 ,200,20) 終點：
quadraticCurveTo(20,100, 200,20 ) Tip:退房bezierCurveTo()方法。 它有兩個控制點，而不是一個。
| JavaScript語法： | context 。 quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
參數值
| 參數 | 描述 | 播放 |
|---|---|---|
| cpx | 貝塞爾控制點的x坐標 | 播放 ” |
| cpy | 貝塞爾控制點的y坐標 | 播放 ” |
| x | 終點的x坐標 | 播放 ” |
| y | 終點的y坐標 | 播放 ” |