javascript - 给html5 canvas上的绘制对象添加事件监听器

Question

我正在制作一款游戏，其中气泡(圆圈)出现在屏幕上并向上移动，我只使用 HTML5 和 JavaScript，这意味着根本没有像 kinetic 这样的框架，也没有 jQuery。

我已经到了想要向气泡本身添加事件监听器的地步，现在我明白了因为气泡是 Canvas 上的一个对象，它没有方法 'addEventListener' 所以我不能直接向气泡添加点击事件，我想知道是否有人可以帮助我解决我遇到的这个问题？这是到目前为止发生的事情的 fiddle ......

Bubbles

我已尝试通过执行此操作将事件监听器添加到之前指定的气泡中......

bubbles[i].addEventListener('click', function);

我也试过添加鼠标事件，例如

bubbles[i].onmouseenter = function () { console.log("blah") }

但是现在，我真的很迷茫

提前致谢!

Answer 1

我已经更新了你的sample on jsfiddle演示 HitTest 。此示例使用绑定(bind)到 Canvas 的 onmousemove 事件处理程序，并在此事件发生时执行实际的 HitTest 。你的 HitTest 是“鼠标坐标是否在气泡的圆圈内？”

变更摘要:

• “气泡”具有颜色属性以演示 HitTest 的效果。
• function hitTest(x, y) { ... } 用于测试传入的坐标是否在气泡内。
• function getMouse(e, canvas) ... 用于将鼠标坐标转换为 Canvas 相对坐标。即，鼠标坐标需要相对于 Canvas 的左上角才能准确。