JS绘图应用光标与绘制轨迹偏移问题求助

安全阿岳

2026-8-14

光标偏移问题的根源与修复方案

问题原因

你遇到的绘制位置和光标偏移的核心问题是Canvas的绘制分辨率和显示尺寸不匹配：

Canvas标签的width和height属性定义了画布内部的绘制坐标系（1024x600）
CSS中给canvas设置了width:100%，当容器宽度超过1024px时，画布会被横向拉伸。此时e.offsetX/Y获取的是光标在显示尺寸上的位置，但绘图API仍然基于1024x600的原始坐标系工作，导致坐标比例失调，偏移量随拉伸程度增大而加剧。

修复步骤

通过坐标转换，把光标在显示尺寸上的位置映射到画布的实际绘制坐标系中：

添加一个计算画布缩放比例的函数：

function getCanvasScale() {
  const rect = canvas.getBoundingClientRect();
  return {
    x: canvas.width / rect.width,
    y: canvas.height / rect.height
  };
}

修改鼠标事件中的坐标获取逻辑：

canvas.addEventListener("mousedown", (e) => {
  isPressed = true;
  const scale = getCanvasScale();
  x = e.offsetX * scale.x;
  y = e.offsetY * scale.y;
});

canvas.addEventListener("mousemove", (e) => {
  if (isPressed) {
    const scale = getCanvasScale();
    const x2 = e.offsetX * scale.x;
    const y2 = e.offsetY * scale.y;

    drawCircle(x2, y2);
    drawLine(x, y, x2, y2);

    x = x2;
    y = y2;
  }
});

这样无论画布被缩放多少，光标位置都能准确对应到绘制坐标上。