javascript - 使用滚动条后 Canvas 像素坐标偏移

Question

我在页面顶部使用 Canvas 。我在 mousemove 事件中从 Canvas 中写出像素坐标。通常，最底部的 Y 值等于 Canvas 高度，即。 700 像素。但是在使用滚动条在页面上向下滚动一点后， Canvas 底部的 y 坐标将相应地更改为 400px。

            document.getElementById("mapcanvas").addEventListener("mousemove", getPosition, false);

            function getPosition(event)
            {
              var x = event.x;
              var y = event.y;

              var canvas = document.getElementById("mapcanvas");

              x -= canvas.offsetLeft;
              y -= canvas.offsetTop;



             document.getElementById("canvascoords").innerHTML = "Canvascoords: "+ "x=" + x + ", y=" + y;





            }

...其中“mapcanvas”是我的 div 持有 Canvas 。

是否有任何想法使 y 坐标独立于滚动条的使用，以便较低的 y 坐标始终为 700px？

Answer 1

如您所见，canvas.offsetLeft 和 canvas.offsetTop 不考虑滚动。

要考虑滚动，您可以使用 canvas.getBoundingClientRect

var BB=canvas.getBoundingClientRect();

var x=event.clientX-BB.left;
var y=event.clientY-BB.top;

顺便说一句，您可能希望在 getPosition() 函数之外只获取一次对 canvas 元素的引用，而不是在 getPosition() 中重复获取它。

var canvas = document.getElementById("mapcanvas");

function getPosition(event){

...