贝塞尔曲线 js 代码

贝塞尔曲线是一种用于绘制平滑曲线的数学函数，可以通过控制点来调整曲线的形状。在 JavaScript 中，可以使用 HTML5 的 canvas 元素和相关 API 来绘制贝塞尔曲线。

下面是一个简单的贝塞尔曲线绘制的示例代码：

// 创建一个 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

// 获取绘图上下文
var ctx = canvas.getContext('2d');

// 设置起始点和控制点
var startX = 100;
var startY = 100;
var controlX = 200;
var controlY = 300;
var endX = 400;
var endY = 100;

// 绘制贝塞尔曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.stroke();

在这个示例中，我们首先创建一个 canvas 元素，并设置其宽度和高度。然后，通过 getContext('2d') 方法获取到绘图上下文。接下来，我们定义了起始点、控制点和结束点的坐标。最后，通过 moveTo 方法将绘图起始点移动到起始点的位置，然后使用 quadraticCurveTo 方法绘制贝塞尔曲线，其中的 controlX 和 controlY 参数是控制点的坐标，endX 和 endY 参数是结束点的坐标。最后，使用 stroke 方法将曲线绘制出来