js 多边形贝塞尔曲线

在JavaScript中，可以使用Canvas API绘制多边形和贝塞尔曲线。

首先，我们需要创建一个Canvas元素并获取其上下文：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

接下来，我们可以定义一个多边形的顶点坐标数组：

const points = [
  { x: 50, y: 100 },
  { x: 100, y: 50 },
  { x: 150, y: 100 },
  { x: 100, y: 150 }
];

然后，我们可以使用beginPath()方法开始绘制路径，并使用moveTo()方法将画笔移动到第一个顶点的位置：

context.beginPath();
context.moveTo(points[0].x, points[0].y);

接下来，我们可以使用lineTo()方法绘制直线连接多边形的每个顶点：

for (let i = 1; i < points.length; i++) {
  const point = points[i];
  context.lineTo(point.x, point.y);
}

要绘制闭合的多边形，可以使用closePath()方法将路径闭合：

context.closePath();

现在，我们可以使用stroke()方法绘制多边形的线条：

context.stroke();

如果你想要填充多边形的内部，可以使用fill()方法：

context.fill();

如果你想要绘制贝塞尔曲线，可以使用quadraticCurveTo()或bezierCurveTo()方法。这些方法需要提供控制点和终点的坐标。例如，使用quadraticCurveTo()方法绘制二次贝塞尔曲线：

context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(100, 100, 150, 50);
context.stroke();

使用bezierCurveTo()方法绘制三次贝塞尔曲线：

context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(80, 100, 120, 100, 150, 50);
context.stroke();

这些方法可以与绘制多边形的方法结合使用，以创建更复杂的图形