画布中元素中的事件

Question

我已经在canvas标签内绘制了图像。 如何向其中添加事件？ 当用户单击该图像时，我想做些事情。

character.addEventListener('click', function() { alert('foo'); }, true);
/* character is a var (image object) within a canvas */

谢谢。

Answer 1

获取画布内每个矩形的点击事件？

此外，我发现此答案在Mozilla中不起作用。

而是使用clientX而不是offsetX。

例如，我在github上的以下位置创建了一个动态画布图像画廊： https : //github.com/michaelBenin/fi-test

每次调整窗口大小时，我都会重新计算绘制的每个图像的x，y，然后在单击画布时从那里运行碰撞函数。

基本上，您可以从click事件中获取x，y值，并检查画布上这些坐标处是否有任何东西。

这是在画布内注册单击事件的另一个很好的链接： http : //eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript /

Answer 2

无法将事件处理程序添加到画布上的实际图形中。 您可以处理整个画布的事件-就是这样。

此时，您的选择是在画布上添加一个抽象，然后基于画布单击事件中的坐标查找在其中具有的绘图-或完全放下画布并使用svg。 Raphaël库（http://raphaeljs.com/）可以为您提供帮助。

Answer 3

见吹链接，有一个样本

http://www.html5canvastutorials.com/cookbook/ch6/1369_06_03/

查看页面来源