CanvasRenderingContext2D: bezierCurveTo() 方法

基线广泛可用

此功能已得到充分建立，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

语法

Canvas 2D API 的**CanvasRenderingContext2D.bezierCurveTo()**方法向当前子路径添加三次贝塞尔曲线。它需要三个点：前两个是控制点，第三个是终点。起点是当前路径中的最新点，可以使用moveTo()在创建贝塞尔曲线之前更改。

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

js

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

终点的 y 轴坐标。

返回值

示例

无（`undefined`）。

bezierCurveTo 的工作原理

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();

html

结果

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

简单的贝塞尔曲线

HTML

此示例显示了三次贝塞尔曲线的绘制方式。

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

JavaScript

此示例使用bezierCurveTo()绘制简单的贝塞尔曲线。

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();