如何在光标下找到HTML5 canvas元素？

Question

我知道有this question建议在每次鼠标移动时循环遍历所有画布元素。

然而，是否有比循环遍历所有元素更有效的方法？

我在画布上有很多元素，并且在每次鼠标移动时循环遍历它们可能非常非常慢。

Answer 1

是的，您必须遍历所有元素。

这几乎是所有热门测试/对象选择的工作方式。

现在你可以进行很多优化，例如在测试它的真实边界之前确保鼠标坐标位于对象的矩形边界内（除非它们都是矩形，这样可以使一切变得方便快捷，即使有10,000个对象）。如果您有一百万个对象，您还可以将它们的位置拆分为象限，或者添加一层隔离。

但是在一天结束时，您需要遍历每个相关对象并询问其边界是否与鼠标点相交。没有办法解决这个问题。 应该要快，如果你已经实现了非常慢的东西，那么你应该发布它，这样我们就可以看看并给你指点。

如果你需要查看一个实例，我完全用simple tutorial on picking and moving shapes in a canvas来解释这样的情况。

Answer 2

在javascript中循环使用10000个元素仍然没有用。

但是你可能会考虑使用一些间隔而不是每次鼠标移动来循环它们。

var mouseX, mouseY;

$(document).on("mousemove", function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;

  /* dont do any probing there */

});

setInterval(function() {
  checkCollision();
}, 25);