Canvas 多边形转换为光滑贝塞尔曲线并闭合 - JavaScript 代码示例

要将多边形转换为光滑的贝塞尔曲线并使其闭合，您可以使用 Canvas 和 JavaScript 编写以下代码：

// 获取canvas元素
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 定义多边形的顶点坐标
const points = [
  { x: 100, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 200 },
  { x: 100, y: 200 }
];

// 将多边形转换为光滑的贝塞尔曲线
function smoothPolygon(points) {
  const bezierPoints = [];
  const numPoints = points.length;

  for (let i = 0; i < numPoints; i++) {
    const p0 = points[i];
    const p1 = points[(i + 1) % numPoints];
    const p2 = points[(i + 2) % numPoints];
    const p3 = points[(i + 3) % numPoints];

    const cp1x = p1.x + (p2.x - p0.x) / 6;
    const cp1y = p1.y + (p2.y - p0.y) / 6;
    const cp2x = p2.x - (p3.x - p1.x) / 6;
    const cp2y = p2.y - (p3.y - p1.y) / 6;

    bezierPoints.push({ x: p1.x, y: p1.y });
    bezierPoints.push({ x: cp1x, y: cp1y });
    bezierPoints.push({ x: cp2x, y: cp2y });
  }

  return bezierPoints;
}

// 绘制光滑的贝塞尔曲线
function drawSmoothPolygon(points) {
  const bezierPoints = smoothPolygon(points);
  const numPoints = bezierPoints.length;

  ctx.beginPath();
  ctx.moveTo(bezierPoints[0].x, bezierPoints[0].y);

  for (let i = 0; i < numPoints - 2; i += 3) {
    ctx.bezierCurveTo(
      bezierPoints[i + 1].x,
      bezierPoints[i + 1].y,
      bezierPoints[i + 2].x,
      bezierPoints[i + 2].y,
      bezierPoints[i + 3].x,
      bezierPoints[i + 3].y
    );
  }

  ctx.closePath();
  ctx.stroke();
}

// 绘制多边形
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);

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

ctx.closePath();
ctx.stroke();

// 绘制光滑的贝塞尔曲线
drawSmoothPolygon(points);

在上述代码中，points数组定义了多边形的顶点坐标。smoothPolygon函数将多边形的顶点转换为光滑的贝塞尔曲线的控制点，然后返回一个新的数组。drawSmoothPolygon函数使用bezierCurveTo方法绘制光滑的贝塞尔曲线。

您可以将上述代码插入到HTML文件中的<script>标签内，确保在<canvas>元素之后。然后，将'myCanvas'替换为您的Canvas元素的ID。

请注意，上述代码仅绘制光滑的贝塞尔曲线，不填充颜色。如果您需要填充颜色，请在ctx.stroke()之前添加ctx.fill()。