特定の場所でカーソルを変更する方法は？

Question

2つの画像があります。 1枚の写真は表面マスクです。 2つの画像は背景レベルです。カーソルを変更してサーフェスマスクを使用する方法は？

黒い四角は、フルモーションの場所です。それは独自のカーソルを持っています。 灰色の四角は部分的な動きの場所です。したがって、それ自身のカーソルもあります。

キャンバスのバッファを作成してマスクをオーバーレイします。しかし、mousemoveのたびに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"; 
    } 
}