マウスオーバー時にドットを見つけるパフォーマンスの問題

Question

私はキャンバス上にドットが多く、マウスオーバーしたときに隠れているタイムアウトの後に再びアニメーションを作成しようとしています。 マウスオーバーエフェクトは、マウスの正確な位置で発生するのではなく、 20×20ピクセルのボックス。私のプロトタイプ私はこれらのループを持って

...

for (var i = -10; i <= 10; i++) { 
    for (var j = -10; j <= 10; j++) { 
      var imagedata = c.getImageData(x+i, y+j, 1, 1).data; 
    if (imagedata[0] == 99) { 
     fadeInRectangle(c, x+i,y+j); 
    } 
    } 
} 

は、マウスがある点を見つけるための迅速な方法はありますか？それは正方形である必要はありませんが、それはまた、位置がチェックされているサークルにすることができます...私は気にしません。事前

のおかげでフィドル：私はどうなるのかhttps://jsfiddle.net/vrjw996h/

Answer 1

は（同様{x:10, y: 40, visible: true}）ドットオブジェクトの配列、ドットのxとy位置を格納し、それぞれ1と同様に、visibleプロパティを作成することです。マウスが動くたびに、各オブジェクトをループし、マウスとドットの間の距離を確認します。ドットが範囲内にある場合は、visibleをfalseに設定します。その部分がまだonmousemoveの内側にある場合は、キャンバスをクリアして、各ドットをvisible: falseでスキップして再描画します。数秒後にvisibleをtrueに戻します。

https://jsfiddle.net/Howzieky/vrjw996h/1/