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

Question

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

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

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

有什么建议吗？

Answer 1

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

请在此处查看 working live demo，然后打开您的 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>

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

How can I test mouse detection on canvas (JavaScript) when the canvas's height exceeds the screen's height (when the scroll bar appears)

html

javascript

canvas

mouseenter

mouseclick-event