鼠标悬停时发现点的性能问题

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/