javascript - html5，将事件监听器添加到 Canvas 上绘制的图像

Question

我正在试验 html5，我有一个小图像下拉菜单，用户选择和图像，然后使用 drawImage() 将其绘制到 Canvas 上；

我似乎无法弄清楚如何为 Canvas 上新绘制的图像添加事件监听器。

我试过像这样把它放在一个变量中:

var newImg = ctx.drawImage(myImage, 200, 200);

然后向其添加一个事件监听器，但它似乎不起作用。

newImg.addEventListener('mousedown', onImgClick, false);

执行此操作的正确方法是什么。

Answer 1

如果您正在寻找这种交互性，<canvas>可能不是你想要的。您正在寻找 SVG .有一个很棒的图书馆叫做Raphaël这使得在所有浏览器上使用 SVG 变得轻而易举，即使在 IE6 上也是如此。它还与 jQuery 完全兼容，所以你可以这样做:

var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);

我很确定这会比 <canvas> 更好地对待您并且更易于使用.

注意:Raphaël 确实为“点击”和“鼠标按下”等基本事件提供了一些帮助程序，只需执行 img.click(onImgClick) ，但如果您已经在使用像 jQuery 这样的库，我建议您保持一致并使用库的事件处理。