Canvas 多边形平滑转换为闭合贝塞尔曲线

要将多边形转换为平滑的贝塞尔曲线并且光滑闭合，可以使用平滑曲线算法，如 Catmull-Rom 算法或 B 样条算法。以下是一个使用 Catmull-Rom 算法的示例代码：

// 定义多边形的顶点坐标数组
var points = [
  { x: 50, y: 150 },
  { x: 200, y: 50 },
  { x: 350, y: 150 },
  { x: 350, y: 300 },
  { x: 200, y: 400 },
  { x: 50, y: 300 }
];

// 创建一个新的数组用于存储贝塞尔曲线的控制点
var bezierPoints = [];

// 循环遍历多边形的顶点
for (var i = 0; i < points.length; i++) {
  // 获取当前顶点及其前后两个顶点
  var p0, p1, p2, p3;
  p0 = points[i];
  if (i === 0) {
    p1 = points[points.length - 1]; // 最后一个顶点
    p2 = points[i + 1];
    p3 = points[i + 2];
  } else if (i === points.length - 1) {
    p1 = points[i - 1];
    p2 = points[0]; // 第一个顶点
    p3 = points[1];
  } else {
    p1 = points[i - 1];
    p2 = points[i + 1];
    p3 = points[i + 2];
  }
  
  // 根据 Catmull-Rom 算法计算贝塞尔曲线的控制点
  var bp1 = {
    x: p1.x + (p2.x - p0.x) / 6,
    y: p1.y + (p2.y - p0.y) / 6
  };
  var bp2 = {
    x: p2.x - (p3.x - p1.x) / 6,
    y: p2.y - (p3.y - p1.y) / 6
  };
  
  // 将控制点添加到数组中
  bezierPoints.push(bp1);
  bezierPoints.push(bp2);
}

// 创建一个新的 Canvas 路径
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();

// 将起始点设置为第一个顶点
ctx.moveTo(points[0].x, points[0].y);

// 使用贝塞尔曲线绘制路径
for (var i = 0; i < points.length; i++) {
  var p1 = bezierPoints[i * 2];
  var p2 = bezierPoints[i * 2 + 1];
  var p3 = points[(i + 1) % points.length];
  ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
}

// 将路径闭合
ctx.closePath();

// 绘制路径
ctx.stroke();

这段代码将根据给定的多边形顶点数组，使用 Catmull-Rom 算法计算出贝塞尔曲线的控制点，并使用贝塞尔曲线绘制出平滑的闭合路径。