在HTML5画布上移动时跟踪鼠标坐标的简单方法

Simple way to track mouse coordinates while moving over HTML5 canvas

本文关键字：坐标 鼠标 简单 方法 跟踪 HTML5 移动      更新时间：2023-09-26

在HTML5画布上移动鼠标时，有没有一种简单的方法可以获得相对鼠标坐标？

我发现了这个：

function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}

但这对我来说太沉重了。在使用画布时使用框架（如Kinetic）来简化这些事情有什么原因吗？

如果您没有在画布上使用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;
    }
}

您可以完全定位画布，然后移除while循环。

最终，如果画布不移动，您可以缓存它的偏移量，然后使用缓存的值。

为了涵盖所有情况：如果画布的位置为fixed，则无需考虑滚动：pageXOffset、pageYOffset。

相关文章：