重叠对象上的HTML画布事件？

Question

如果我的画布上有一个圆圈，在点击它时会改变颜色，我可以在画布元素上使用click事件并处理该数学（距离公式计算＆lt; = radius）。但是，如果我有两个重叠的圆圈（如范图），我点击两个圆圈的中间，假设只有顶部圆圈应该改变颜色？如果在这种情况下应用第一个圆的数学运算，则两个圆都会改变颜色。

如何在重叠对象方面处理画布中的事件，如上例所示？希望有一个快速/有效的算法？

Answer 1

Canvas并不像Flash那样，或者像DOM树，因为事物有排序顺序或z索引。它有点像一个平坦的光栅图像，你必须依靠你的javascript中的其他逻辑来记住序列＆amp;堆积你绘制的东西的顺序。

如果你需要这种互动性，我总是发现最好使用第三方图书馆（除非它只是一个或两个圆圈的情况，并没有做太多）。

对于基于交互式“形状”的javascript图形，我会使用Raphael.js或D3，它实际上比SVG工具更多，所以也许它不适合你，但它们很简单并且是跨浏览器的。

还有processing.js（处理Java库的js端口）感觉有点像闪存，并且可以再次跟踪所有级别和对象。除了其他话题之外，还有其他一些主题。

如果它超级简单，选项可能是：

1. 将画布上合成的所有形状/元素的坐标保持在一个对象或数组中，该对象或数组也跟踪它们的z-index /排序顺序，从而让你知道最新的内容。
2. 在点击的鼠标坐标处使用imagedata来确定已点击的内容
3. 使用多个相互合成的画布，让DOM为点击事件工作

Answer 2

你可能想要一个像EaselJS这样的框架，它对你正在尝试做的事情有更好的api。 Barebones canvas 2d-context在显示对象/精灵行为方面没有提供太多。

上面的回复还提到了某种表示图层的列表。我不认为实施会非常困难，只是另一个需要检查半径的条件。