Question

我需要将鼠标光标更改为自定义图像。

如果可能的话，我想在spritesheet上做。我无法从CSS中做到这一点因为我在游戏中使用它。我已经知道如何决定等等。

我需要知道的是如何将光标更改为图像，并确定图像的位置和大小？是否有类似于drawImage图像位置的简单解决方案？

Answer 1

您可以使用javascript设置CSS来隐藏光标：

your_canvas.style.cursor = "none"

然后您可以使用以下内容获取光标的位置（现在已隐藏）：

your_canvas.addEventListener("mousemove", function (ev) {
    var mouseX = ev.pageX - GetTopLeft(your_canvas).Left;
    var mouseY = ev.pageX - GetTopLeft(your_canvas).Top;
});

然后你可以修改你的画布，在那个位置显示你更漂亮的光标精灵。

GetTopLeft定义如下：

function GetTopLeft(elm){

    var x, y = 0;

    //set x to elm’s offsetLeft
    x = elm.offsetLeft;

    //set y to elm’s offsetTop
    y = elm.offsetTop;

    //set elm to its offsetParent
    elm = elm.offsetParent;

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x
    //offsetTop to y and set elm to its offsetParent

    while(elm != null)
    {

    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
    }

    //here is interesting thing
    //it return Object with two properties
    //Top and Left

    return {Top:y, Left: x};

}

虽然我不记得从哪里复制了GetTopLeft函数......

Answer 2

如果您使用的是画布，只需将光标隐藏在画布上，然后在画布上的鼠标位置绘制您自己的精灵。

使用javascript自定义光标图像

2 个答案: