Canvas bezierCurveTo() 方法
示例
绘制三次贝塞尔曲线
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
亲自试一试 »
描述
The bezierCurveTo() 方法使用代表三次贝塞尔曲线的控制点向路径添加曲线。
使用 stroke() 或 fill() 方法绘制路径。
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算的控制点，最后一个点是曲线的结束点。 曲线的起点是当前路径中的最后一个点。如果不存在路径，请使用 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)
注意
quadraticCurveTo() 方法 只有一个控制点，而不是两个。
另请参阅
beginPath() 方法 (开始新路径)
closePath() 方法 (关闭当前路径)
moveTo() 方法 (将路径移动到一个点)
lineTo() 方法 (向路径添加一条线)
fill() 方法 (填充当前路径)
stroke() 方法 (绘制当前路径)
arc() 方法 (向路径添加一个圆)
arcTo() 方法 (向路径添加一个圆)
quadraticCurveTo() 方法 (向路径添加一条曲线)
语法
| context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
参数值
| 参数 | 描述 | 玩它 |
|---|---|---|
| cp1x | 第一个贝塞尔控制点的 x 坐标 | 玩它 » |
| cp1y | 第一个贝塞尔控制点的 y 坐标 | 玩它 » |
| cp2x | 第二个贝塞尔控制点的 x 坐标 | 玩它 » |
| cp2y | 第二个贝塞尔控制点的 y 坐标 | 玩它 » |
| x | 结束点的 x 坐标 | 玩它 » |
| y | 结束点的 y 坐标 | 玩它 » |
返回值
| NONE |
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
bezierCurveTo() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
