无法获取鼠标准确坐标的问题：在调整页面大小时使用HTML5画布

Question

我想从前端专家那里创建这个像素效果。

虽然我能够在全屏画布上实现整个像素效果：

const canvas = getElementById('canvas');

canvas.height = window.innerHeight; // 给画布设置全屏高度
canvas.width= window.innerWidth; // 给画布设置全屏宽度

并且很容易获取鼠标的坐标

const mouse = {
  x: undefined,
  y: undefined
}
canvas.addEventListner('mousemove', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
}

此时画布的宽度和高度与文档相等，因此很容易获得鼠标的准确坐标。 但是当我尝试使用800px X 400px的尺寸并在其中使用flexbox（如网站所示）时，我的鼠标坐标完全混乱了，我花了几个小时来修复，但无法获得与上述网站中显示的准确性。同时还存在一些与调整大小相关的问题。

我想知道如何保持鼠标的准确性。

非常感谢您的帮助。

Answer 1

我相信当你使用e.x和e.y时，即使在canvas的事件监听器中使用，它们返回的是相对于整个页面左上角像素的鼠标坐标，而不仅仅是canvas的坐标。如果你所说的"messed up"是指无论你在哪里点击，像素效果都会以某个固定方向偏移，那么这可能是你的问题，你应该用e.clientX和e.clientY代替e.x和e.y。e.clientX中的"client"指的是监听器所针对的元素，并指定相对于该元素而不是页面给出事件坐标。如果以其他方式出现问题，那么我想我没有答案。