原生JS开发HTML5 Canvas类恐怖迷宫游戏鼠标跟随偏移问题求助

你遇到的「偏移量随鼠标远离屏幕左上角距离增大而升高」的表现，是Canvas鼠标坐标计算错误的典型特征，核心诱因基本集中在坐标换算环节：

• 最核心的触发原因：直接把鼠标事件返回的视口坐标（clientX/clientY）当Canvas内部坐标用，完全没扣除Canvas元素本身在页面上的位置偏移。clientX/clientY是相对于浏览器视口左上角的绝对坐标，但绘制逻辑需要的是相对于Canvas自身左上角的相对坐标；因为没扣掉Canvas和视口左上角之间的固定距离，鼠标离视口左上角越远，这个固定差值带来的偏移感就越强，和你描述的偏移变化规律完全吻合。
• 常见的叠加放大问题：如果只通过CSS给Canvas设置了显示宽高，没同步设置Canvas标签原生的width/height画布属性，会出现CSS显示尺寸和画布实际分辨率不匹配的问题，额外叠加上缩放比例带来的坐标错位，让偏移感更明显。

正确的换算实现方式：每次触发鼠标事件时，先通过Canvas的getBoundingClientRect()拿到该元素在视口中的实时位置，用鼠标的视口坐标减去对应偏移值，再补上缩放比例换算，得到真正的Canvas内部可用坐标。参考实现代码：

const mazeCanvas = document.querySelector('canvas');
mazeCanvas.addEventListener('mousemove', (e) => {
  // 获取Canvas在视口中的边界位置
  const canvasRect = mazeCanvas.getBoundingClientRect();
  // 第一步：扣除Canvas自身和视口的位置差
  const posX = e.clientX - canvasRect.left;
  const posY = e.clientY - canvasRect.top;
  // 第二步：处理CSS尺寸和画布原生尺寸不一致的缩放问题
  const ratioX = mazeCanvas.width / canvasRect.width;
  const ratioY = mazeCanvas.height / canvasRect.height;
  // 最终得到的准确Canvas内部坐标，直接用来画跟随矩形即可
  const finalMouseX = posX * ratioX;
  const finalMouseY = posY * ratioY;
});

额外避坑提示：别直接依赖鼠标事件自带的offsetX/offsetY当坐标值，这组值在存在页面滚动、嵌套定位元素的场景下很容易算错，可靠性远不如手动换算的逻辑。

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