使用javascript自定义光标图像

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

如果可能的话，我想在精神病床上做。 我不能从css中完成它，因为我在游戏中使用它。我已经知道如何决定何时等

我需要知道的是如何将光标更改为图像，并确定图像的位置和大小？

---

有没有类似于drawImage图像位置的简单解决方案？

您可以使用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函数…

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

如果你使用javascript修改css，你可以使用css…我知道我可以使用css来完成，但如果可能的话，我宁愿不这样做，正如我在文章中所说，为光标设置CSS是隐藏光标的唯一方法。你为什么不想使用CSS呢？这是一个很好的简单的解决方案，我没有想到。我将使用这种方法。没问题，祝你开发成功。是的，我有一个在画布上定位鼠标的功能，一切就绪，只需按照你和迈克·德皮斯所说的那样绘制图像就可以很好地解决我的问题