如何在光标下找到 HTML5 画布元素？答案

【问题标题】：How to find HTML5 canvas element under cursor?如何在光标下找到 HTML5 画布元素？
【发布时间】：2012-10-09 11:04:28
【问题描述】：

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

但是，有没有比遍历所有元素更有效的方法？

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

【问题讨论】：

Element 在 HTML 中意味着一些非常具体的东西，从其他 cmets 看来，您在问题中并没有在这个意义上使用元素。 canvas 是一个元素，它没有元素，它只是一个位图。如果您希望绘图由元素组成，请使用 SVG。

标签： html canvas cursor html5-canvas mousemove

【解决方案1】：

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

这就是几乎所有命中测试/对象挑选的工作原理。

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

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

如果你需要看一个活生生的例子，我制作了一个simple tutorial on picking and moving shapes in a canvas 正是为了解释这样的情况。

【讨论】：

谢谢你，Simon，正是在你出色的教程下，我才开始学习 HTML5 画布。我想我现在使用的你会称之为象限。我将画布划分为一些区域，类似于表格，并且我正在通过这个表格来定义正确的“单元格”。但是“隔离层”是什么意思？

【解决方案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);

【讨论】：