例
绘制二次贝塞尔曲线：
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坐标 | 播放 ” |