画布 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();
自己试试 »
描述
The 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 坐标 | 播放它 » |
返回值
| 无 |
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
quadraticCurveTo() 在所有现代浏览器中受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
