在div上描点并保存x和y的坐标，但改变分辨率后，这些点的位置就不对

这是因为改变分辨率后，屏幕上的像素数量发生了改变，导致原本在某个像素上的点，现在可能出现在另一个像素上。

要解决这个问题，一种方法是在保存点的位置时，不要直接保存像素坐标，而是保存相对于屏幕宽度和高度的比例坐标。当分辨率改变时，重新计算比例坐标，就可以得到正确的像素坐标。

具体实现可以参考以下代码：

<div id="canvas" style="position: relative; width: 100%; height: 100%;">
  <div id="point" style="position: absolute; width: 10px; height: 10px; background-color: red;"></div>
</div>

<script>
  var canvas = document.getElementById('canvas');
  var point = document.getElementById('point');
  var pointX = 0.5; // 初始化比例坐标
  var pointY = 0.5;

  function updatePoint(x, y) {
    pointX = x / canvas.clientWidth; // 计算比例坐标
    pointY = y / canvas.clientHeight;
    point.style.left = (pointX * 100) + '%'; // 转换为百分比
    point.style.top = (pointY * 100) + '%';
  }

  canvas.addEventListener('mousedown', function(event) {
    updatePoint(event.clientX, event.clientY);
  });

  window.addEventListener('resize', function() {
    updatePoint(pointX * canvas.clientWidth, pointY * canvas.clientHeight);
  });
</script>

上面的代码中，我们使用了 `clientWidth` 和 `clientHeight` 属性来获取屏幕的宽度和高度，它们会自动根据分辨率的改变而更新。然后，我们根据比例坐标计算点的像素坐标，并使用百分比单位设置点的位置。当分辨率改变时，重新计算比例坐标，并将其转换为像素坐标更新点的位置。