html5，将一个eventlistener添加到画布上的绘制图像

我正在试验html5，并且我有一个小图片下拉菜单，用户选择图像并使用drawImage（）将其绘制到画布上。html5，将一个eventlistener添加到画布上的绘制图像

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

我试图把它放在一个变量，像这样：

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

，然后添加一个事件侦听到，但它似乎并没有工作。

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

什么是正确的方法来做到这一点。

2010-04-18 pfunc

画布不是retained-mode绘图表面。这只是一个平面图像;它内部没有任何对象来绑定事件，并且drawImage什么也没有返回。

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

2010-04-19 00:04:43 bobince

我很困惑，因为它似乎有很多关于如何操作画布上绘制的对象的教程。甚至有一个使用画布的JavaScript游戏库。 http://www.kesiev.com/akihabara/ 所以它看起来好像你可以操纵你放在画布上的那些图像。 – pfunc 2010-04-30 22:11:14

你可以在真正的画布上画一个圆圈，但之后只有油漆。你无法拾起那个圆圈并将其从画布上取下来;你不能将它移动到绘画另一部分的顶部; *它只是油漆*。您可以将图片，路径和文本等对象应用于'

如果你正在寻找这种交互性，<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>使用。

注：拉斐尔也确实会带来一些助手对于喜欢“点击”和“鼠标按下”基本事件，只是做img.click(onImgClick)，但如果你已经在使用像jQuery库，你可能有，我会建议保持一致并使用图书馆的事件处理。

2010-04-19 00:23:42 bcherry

啊，很高兴知道。我认为可能是这样，但我也认为，因为我可以看到添加在源代码中的img我可以操纵它。 – pfunc 2010-04-19 00:36:09

不同之处在于'

很酷。已经开始使用它，它非常简单。我回过头来看，在canvas元素中我看不到源代码img，在之前的测试中我有一些剩余的代码。谢谢。 – pfunc 2010-04-19 00:52:27

要做到这一点，而不JS的帮助：

虽然不能一个事件侦听器附加到在其上调用的drawImage上下文（）;您可以将事件侦听器附加到Canvas本身。

myCanvasElement = document.getElementById('canvasElement'); 
myCanvasElement.addEventListener("click", someFunction, false);

如果你需要有这样每映像你画的，你很可能叠加画布对象，并为每一个你画图像一个新的。

2011-07-26 22:45:57

这仍然是JS你在这里使用...（@“没有JS的帮助下做到这一点：...”） – Peter 2012-05-31 19:49:08

回答