如何在多边形中保存更改的坐标

// 创建多边形对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var polygon = {
  vertices: [
    { x: 50, y: 50 },
    { x: 150, y: 50 },
    { x: 150, y: 150 },
    { x: 50, y: 150 }
  ]
};

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

// 监听鼠标拖动事件
canvas.addEventListener("mousemove", function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  // 更新坐标
  if (isDragging) {
    var vertex = polygon.vertices[selectedVertexIndex];
    vertex.x = mouseX;
    vertex.y = mouseY;
    drawPolygon();
  }
});

// 保存坐标
function saveCoordinates() {
  // 将多边形的坐标保存在某个数据结构中，例如数组或对象
  var coordinates = [];
  for (var i = 0; i < polygon.vertices.length; i++) {
    coordinates.push({ x: polygon.vertices[i].x, y: polygon.vertices[i].y });
  }
  console.log(coordinates);
}