Canvas 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)
注意
The bezierCurveTo() 方法 具有两个控制点而不是一个。
另请参见
The beginPath() 方法（开始新的路径）
The closePath() 方法（关闭当前路径）
The moveTo() 方法（将路径移动到一个点）
The lineTo() 方法（在路径中添加一条线）
The fill() 方法（填充当前路径）
The stroke() 方法（绘制当前路径）
The arc() 方法（在路径中添加一个圆）
The arcTo() 方法（在路径中添加一个圆）
The bezierCurveTo() 方法（在路径中添加一条曲线）
语法
| context.quadraticCurveTo(cpx, cpy, x, y) |
参数值
| 参数 | 描述 | 播放它 |
|---|---|---|
| cpx | Bézier 控制点的 x 坐标 | 播放它 » |
| cpy | Bézier 控制点的 y 坐标 | 播放它 » |
| x | 结束点的 x 坐标 | 播放它 » |
| y | 结束点的 y 坐标 | 播放它 » |
返回值
| 无 |
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
quadraticCurveTo() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
