javascript - 当 Canvas 的高度超过屏幕的高度时(当滚动条出现时)，如何在 Canvas (JavaScript)上测试鼠标检测

Question

当没有滚动条时，我可以在 Canvas 上测试鼠标坐标:

var mx = evt.clientX - canvas.offsetX
var my = evt.clientY - canvas.offsetY

但是，当我向下滚动网页并重新定位鼠标时，坐标会倾斜。

有什么建议吗？

Answer 1

听起来您正在尝试测试鼠标在 Canvas 上的位置(而不是鼠标在屏幕上的位置)。为此，即使存在滚动条，evt.offsetX 和 evt.offsetY 也足够了。

请在此处查看实时演示，然后打开 JS 控制台，您将能够看到光标相对于 Canvas 的坐标:

var canvas = document.getElementsByTagName("canvas")[0];

canvas.onmousemove = function(evt) {
    var mx = evt.offsetX;
    var my = evt.offsetY;
    console.log(mx, my);
}

<canvas height="800" width="200" style="border: solid black 1px"></canvas>