例
繪製三次Bezier曲線：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke(); 試一試» 瀏覽器支持
在表中的數字規定，完全支持方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
所述bezierCurveTo()方法通過使用代表三次Bezier曲線指定的控制點增加了一個點到當前路徑。
三次貝塞爾曲線需要三個點。 前兩個點是在三次Bezier計算中使用和最後一點是對於曲線終點控制點。 對於曲線的起點是在當前路徑的最後一個點。 如果路徑不存在，使用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 ) Tip:退房quadraticCurveTo()方法。 它有一個控制點，而不是兩個。
| JavaScript語法： | context 。 bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ) ; |
|---|
參數值
| 參數 | 描述 | 播放 |
|---|---|---|
| cp1x | 第一貝塞爾控制點的x坐標 | 播放 ” |
| cp1y | 第一貝塞爾控制點的y坐標 | 播放 ” |
| cp2x | 第二貝塞爾控制點的x坐標 | 播放 ” |
| cp2y | 第二貝塞爾控制點的y坐標 | 播放 ” |
| x | 終點的x坐標 | 播放 ” |
| y | 終點的y坐標 | 播放 ” |