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/

在鼠标悬停上找到点的性能问题

1 个答案: