在html5画布上为绘制的对象添加事件侦听器

Question

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

我已经到了一个点，我想在泡泡本身添加一个事件监听器，现在我明白了，因为泡泡是画布上的一个对象，它没有方法'addEventListener'所以我不能直接添加一个点击事件到泡沫，我想知道是否有人可以帮我解决这个问题我有吗？这是迄今为止发生的事情的小提琴......

Bubbles

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

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

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

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

但是现在，我真的很茫然

提前致谢！

Answer 1

我已更新您的sample on jsfiddle演示命中测试。此示例使用绑定到画布的onmousemove事件处理程序，并在发生此事件时执行实际的命中测试。你的案例中的命中测试是“鼠标是否与气泡的圆圈坐标？”

变更摘要：

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