html5,将eventlistener添加到画布上的绘制图像

Question

我正在试验html5并且我有一个小图像下拉列表,用户选择和图像并使用drawImage()将其绘制到画布上;

我似乎无法弄清楚如何将事件监听器添加到画布上新绘制的图像.

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

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

然后添加一个eventlistener,但它似乎不起作用.

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确实附带了一些基本事件的助手,比如"click"和"mousedown",只是这样做img.click(onImgClick),但是如果你已经使用了jQuery这样的库,你可能会这样,我建议保持一致并使用库的事件处理.

Answer 2

画布不是保留模式绘图表面.它只是一个平面图像; 其中没有任何对象将事件绑定到,并且不drawImage返回任何内容.

你必须检测点击<canvas>并检查它们是否在手动的[200,200,200 + w,200 + h]矩形内.或者,如果您想要保留模式绘图,请考虑使用SVG而不是画布.