無法取得滑鼠準確座標的問題：在調整頁面大小時使用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"指的是監聽器所針對的元素，並指定相對於該元素而不是頁面給出事件座標。如果以其他方式出現問題，那麼我想我沒有答案。