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

要将多边形转换为光滑的贝塞尔曲线并且闭合，可以使用Canvas的quadraticCurveTo()方法和closePath()方法来实现。下面是一个示例代码：

// 获取Canvas元素和上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 定义多边形的顶点坐标
var vertices = [
  {x: 50, y: 50},
  {x: 100, y: 100},
  {x: 150, y: 50},
  {x: 100, y: 150}
];

// 将多边形转换为贝塞尔曲线
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (var i = 1; i < vertices.length - 1; i++) {
  var xc = (vertices[i].x + vertices[i + 1].x) / 2;
  var yc = (vertices[i].y + vertices[i + 1].y) / 2;
  ctx.quadraticCurveTo(vertices[i].x, vertices[i].y, xc, yc);
}
// 连接最后一个顶点和第一个顶点
ctx.quadraticCurveTo(vertices[i].x, vertices[i].y, vertices[0].x, vertices[0].y);
// 闭合路径
ctx.closePath();

// 绘制贝塞尔曲线
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();

你需要将上述代码中的myCanvas替换为你的Canvas元素的ID。这段代码将根据给定的多边形顶点坐标绘制光滑的闭合贝塞尔曲线。