画布JS如何获得多边形形状的高度和宽度？

// 创建画布
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

// 设置画布大小
canvas.width = 800;
canvas.height = 600;

// 获取画布的上下文
var ctx = canvas.getContext('2d');

// 定义多边形的顶点坐标
var vertices = [
  { x: 100, y: 100 },
  { x: 200, y: 200 },
  { x: 300, y: 150 },
  // 添加更多顶点坐标...
];

// 绘制多边形
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (var i = 1; i < vertices.length; i++) {
  ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.stroke();

// 计算多边形的边界框
var minX = Infinity;
var minY = Infinity;
var maxX = -Infinity;
var maxY = -Infinity;

for (var i = 0; i < vertices.length; i++) {
  var vertex = vertices[i];
  minX = Math.min(minX, vertex.x);
  minY = Math.min(minY, vertex.y);
  maxX = Math.max(maxX, vertex.x);
  maxY = Math.max(maxY, vertex.y);
}

// 计算多边形的高度和宽度
var width = maxX - minX;
var height = maxY - minY;

console.log('多边形的宽度：', width);
console.log('多边形的高度：', height);