【发布时间】：2012-08-24 21:54:36
【问题描述】：
如果我的画布带有一个在单击它时会改变颜色的圆圈，我可以在画布元素上使用一个单击事件并处理它的数学运算（距离公式计算
我将如何处理画布中的事件，如上例所示的重叠对象？希望有一个快速/高效的算法？
【问题讨论】：
标签： javascript html canvas
【发布时间】：2012-08-24 21:54:36
【问题描述】：
你可能想要一个像 EaselJS 这样的框架，它有更好的 API 来完成你想要做的事情。准系统画布 2d-context 在显示对象/精灵行为方面没有提供太多。
上面的回复还提到了某种表示层的列表。我认为实现不会很困难，只是与半径一起检查的另一个条件。
【讨论】：
-
我认为使用 javascript 库是个好主意，我想我会尝试 kinetic.js
Canvas 不像 Flash 或 DOM 树，其中事物具有排序顺序或 z-indexes。它有点像平面光栅图像，您必须依靠 javascript 中的其他逻辑来记住您绘制的事物的顺序和堆叠顺序。
如果您需要这种交互性，我一直认为最好使用 3rd 方库（除非它真的只是一个或两个没有多大作用的圈子）。
对于基于交互式“形状”的 javascript 图形，我建议使用 Raphael.js 或 D3，它们实际上是 SVG 工具而不是画布工具，所以也许它不适合你，但它们很简单且跨浏览器。
还有 processing.js（Processing the Java lib 的 js 端口），感觉有点像 flash，又可以跟踪所有的关卡和对象。还有很多其他的，但那是另一个话题。
如果它非常简单，选项可能是：
- 将合成在画布上的所有形状/元素的坐标保存在一个对象或数组中，该对象或数组还跟踪它们的 z-index/排序顺序，从而让您知道最上面的内容。
- 使用单击鼠标坐标处的图像数据来确定已单击的内容
- 使用相互合成的多个画布并让 DOM 为点击事件工作
【讨论】：