在鼠標懸停上發現點的性能問題

Question

嗯，我正在試圖製作一個動畫，其中有很多點在畫布上，鼠標懸停時它們被隱藏並且在超時後再次顯示。 鼠標懸停效果不應該只發生在鼠標的確切位置，而是在一個20x20像素的盒子。

在我的原型我有這些循環...

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和y位置，以及一個visible屬性（像{x:10, y: 40, visible: true}）。每當鼠標移動時，循環遍歷每個對象並檢查鼠標和點之間的距離。如果發現點在範圍內，請將其屬性visible設置爲false。之後，仍在onmousemove之內，清除畫布並重新繪製每個點，跳過visible: false。幾秒鐘後，將visible設置回true。

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