CanvasRenderingContext2D: bezierCurveTo() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

Canvas 2D API 的 CanvasRenderingContext2D.bezierCurveTo() 方法会将一个三次 Bézier 曲线添加到当前子路径。它需要三个点：前两个是控制点，第三个是终点。起点是当前路径中的最后一个点，可以在创建 Bézier 曲线之前使用 moveTo() 进行更改。

语法

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

参数

cp1x: 第一个控制点的 x 轴坐标。
cp1y: 第一个控制点的 y 轴坐标。
cp2x: 第二个控制点的 x 轴坐标。
cp2y: 第二个控制点的 y 轴坐标。
x: 终点的 x 轴坐标。
y: 终点的 y 轴坐标。

返回值

无（undefined）。

示例

bezierCurveTo 的工作原理

本示例展示了如何绘制三次 Bézier 曲线。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

// Define canvas and context
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Define the points as {x, y}
let start = { x: 50, y: 20 };
let cp1 = { x: 230, y: 30 };
let cp2 = { x: 150, y: 80 };
let end = { x: 250, y: 100 };

// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();

// Start and end points
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI); // Start point
ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI); // End point
ctx.fill();

// Control points
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Control point one
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Control point two
ctx.fill();

结果

在此示例中，控制点为红色，起点和终点为蓝色。

简单的 Bézier 曲线

本示例使用 bezierCurveTo() 绘制了一条简单的 Bézier 曲线。

HTML

html

<canvas id="canvas"></canvas>

JavaScript

曲线从 moveTo() 指定的点 (30, 30) 开始。第一个控制点位于 (120, 160)，第二个控制点位于 (180, 10)。曲线结束于 (220, 140)。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.bezierCurveTo(120, 160, 180, 10, 220, 140);
ctx.stroke();

结果

规范

规范
HTML # dom-context-2d-beziercurveto-dev

浏览器兼容性

另见

定义此方法的接口：CanvasRenderingContext2D
贝塞尔曲线

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年9月25日，由 MDN 贡献者编辑。

在 GitHub 上查看此页面 • 报告此内容的错误