js生成三条贝塞尔曲线

以下是一个简单的 JavaScript 代码示例，用于生成三条贝塞尔曲线：

// 创建画布和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 设置起始点和控制点
var startX = 50;
var startY = 100;
var control1X = 100;
var control1Y = 50;
var control2X = 150;
var control2Y = 150;
var endX = 200;
var endY = 100;

// 绘制第一条曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
ctx.stroke();

// 修改控制点和终点
control1X += 50;
control2X += 50;
endX += 50;

// 绘制第二条曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
ctx.stroke();

// 修改控制点和终点
control1X += 50;
control2X += 50;
endX += 50;

// 绘制第三条曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
ctx.stroke();

代码中使用了 `bezierCurveTo()` 方法来绘制三条贝塞尔曲线。要生成更多的曲线，只需修改控制点和终点的坐标即可。