HTML5 Canvas鼠标绘制位置与实际点击点偏移问题如何修复

问题根因 #

• 原有鼠标坐标计算逻辑依赖offsetLeft/offsetTop，该值的相对基准受父元素定位属性影响不稳定，且未计入页面滚动偏移量
• 未处理Canvas内在像素尺寸（通过width/height属性设置）与页面显示尺寸（通过CSS设置）的比例差，一旦Canvas出现缩放会导致坐标比例偏移
• 底图绘制硬编码为800400，与Canvas本身1000500的尺寸不匹配，底图本身存在拉伸偏移
• HTML结构语法错误，<body>标签嵌套在<div>内，可能导致布局计算异常

修复步骤 #

1. 修正鼠标坐标计算逻辑 #

替换findxy函数中所有currX/currY的计算逻辑，使用getBoundingClientRect获取准确的Canvas位置，同时增加比例缩放适配：

function findxy(res, e) {
  // 新增坐标计算通用逻辑
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  const correctX = (e.clientX - rect.left) * scaleX;
  const correctY = (e.clientY - rect.top) * scaleY;

  if (res == 'down') {
    prevX = currX;
    prevY = currY;
    // 替换原有坐标计算
    currX = correctX;
    currY = correctY;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
      ctx.beginPath();
      ctx.fillStyle = x;
      ctx.fillRect(currX, currY, 2, 2);
      ctx.closePath();
      dot_flag = false;
    }
  }
  if (res == 'up' || res == "out") {
    flag = false;
  }
  if (res == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      // 替换原有坐标计算
      currX = correctX;
      currY = correctY;
      draw();
    }
  }
}

2. 修正底图绘制尺寸 #

修改init函数中的底图加载逻辑，让底图铺满整个Canvas，避免底图偏移：

base_image.onload = function() {
  ctx.drawImage(base_image, 0, 0, canvas.width, canvas.height);
};

3. 修正HTML结构 #

调整非法的HTML嵌套，将<div>放在<body>内部：

<body onload="init()">
  <div class="snap-field col-sm-12" style="height: 800px;">
    <canvas id="can" width="1000" height="500" 
            style="border:1px solid;position:absolute;">
    </canvas>
  </div>
</body>

内容的提问来源于stack exchange，提问作者David