js生成三条贝塞尔曲线
时间: 2023-11-29 12:05:35 浏览: 38
以下是一个简单的 JavaScript 代码示例,用于生成三条贝塞尔曲线:
```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()` 方法来绘制三条贝塞尔曲线。要生成更多的曲线,只需修改控制点和终点的坐标即可。