javascript - 如何改变特定位置的光标？

Question

有两张图片。一张图片是表面掩模。两张图片是背景级别的。如何更改光标并使用表面 mask ？

黑色方 block 是全力运动的地方。它有自己的光标。 灰色方 block 是部分运动的地方。所以它也有自己的光标。

我有一个想法。为 Canvas 创建一个缓冲区并覆盖蒙版。但是每次鼠标移动时我们都必须调用 GetPixelsColor。这个决定并不理性。

谁遇到过类似的事情？谢谢。

Answer 1

尝试以下操作:

window.addEventListener('mousemove', draw, false);
function draw(e) {
    changeCursor(canvas, e);
}

function changeCursor(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    coords = {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
    if(coords.x >= box.x && coords.x <= box.x+box.width && coords.y >= box.y && coords.y <= box.y+box.width){
        canvas.style.cursor = "crosshair";
    }
}