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

如果我有一个画布，上面有一个圆圈，在单击它时会改变颜色，那么我可以在canvas元素上使用一个click事件来处理这个问题（距离公式计算Canvas与Flash或DOM树不同，在DOM树中，事物具有排序顺序或z索引。它更像是平面光栅图像，您必须依赖javascript中的其他逻辑来记住所绘制事物的顺序和堆叠顺序

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

对于交互式的基于“形状”的javascript图形，我建议使用Raphael.js或D3，它们实际上更多地是SVG工具，而不是画布工具，因此可能不适合您，但它们简单且跨浏览器

还有processing.js（处理Java库的js端口），感觉有点像flash，可以跟踪所有级别和对象

如果非常简单，则选项可能是：

将画布上合成的所有形状/元素的坐标保存在一个对象或数组中，该对象或数组还跟踪它们的z索引/排序序列，从而让您知道顶部是什么

在单击鼠标坐标处使用imagedata来确定已单击的内容

使用相互合成的多个画布，并让DOM为单击事件执行工作

---

您可能需要一个像EaselJS这样的框架，它有一个更好的api来完成您的任务。Barebones canvas 2d上下文在显示对象/精灵行为方面没有提供太多

---

上面的回答还提到了一些表示层的列表。我不认为实现会很困难，只是需要检查radius的另一个条件。

我认为使用javascript库是个好主意，我想试试kinetic.js