移动后在画布中获取鼠标位置答案

【问题标题】：Getting mouse position in canvas after movement移动后在画布中获取鼠标位置
【发布时间】：2013-06-02 14:19:17
【问题描述】：

我正在使用此功能将鼠标坐标转换为画布上的坐标，但有时向下滚动然后向上滚动后，画布上的鼠标位置将不匹配。函数如下：

function getMousePos(x, y) {
        var rect = document.getElementById("canvas").getBoundingClientRect();
        return {
        x: x - rect.left,
        y: y - rect.top
        };
    }

【问题讨论】：

标签： javascript dom canvas html5-canvas mousemove

【解决方案1】：

如果您没有在画布上使用 mousemove，请使用：

$(function () { 
canvas = document.getElementById('canvas');
canvas.onmousemove = mousePos;
 });

function mousePos(e) {
    if (e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if (e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}

【讨论】：

【解决方案2】：

我刚刚做了类似的事情。我没有考虑水平滚动。我希望这会有所帮助。

在您的 html 标记中添加 onmousemove="cnvs_getCoordinates(event)"。然后在你的 javascript 文件中：

function cnvs_getCoordinates(e)
{
    var offsetOfBox = document.getElementById('canvas').offset();

    x = e.clientX - offsetOfBox.left;
    y = e.clientY - offsetOfBox.top + $(window).scrollTop();
}

变量 x 和 y 是画布上的坐标。我的功能唯一不好的是它只在鼠标移动时运行。但数学是一样的。

【讨论】：