我正在尝试使用html5，我有一个小图片下拉列表，用户选择和图像，然后使用drawImage（）将其绘制到画布;
我似乎无法弄清楚如何在画布上为新绘制的图像添加事件监听器。
我试过把它放在一个变量中：
var newImg = ctx.drawImage(myImage, 200, 200);
然后添加一个eventlistener，但它似乎不起作用。
newImg.addEventListener('mousedown', onImgClick, false);
这样做的正确方法是什么。
答案 0 :(得分：7)
如果您正在寻找这种交互性，<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确实为“click”和“mousedown”这样的基本事件提供了一些助手，只做了img.click(onImgClick)，但是如果你已经使用了像jQuery这样的库，那你可能就是，我建议保持一致并使用库的事件处理。
答案 1 :(得分：5)
Canvas不是retained-mode绘图表面。它只是一个平面图像; drawImage则不返回任何内容。
您必须检测<canvas>上的点击，并手动检查它们是否在[200,200,200 + w，200 + h]矩形内。或者，如果您想要保留模式绘制，请考虑使用SVG而不是画布。
答案 2 :(得分：0)
在没有JS帮助的情况下这样做：
虽然您无法将事件侦听器附加到您调用drawImage（）的上下文中;您可以将事件侦听器附加到Canvas本身。
myCanvasElement = document.getElementById('canvasElement');
myCanvasElement.addEventListener("click", someFunction, false);
如果你需要绘制这个每个图像，你可以堆叠画布对象并为你绘制的每个图像创建一个新对象。