一千萬個為什麽

搜索

html5,將eventlistener添加到畫布上的繪制圖像

我正在試驗html5並且我有一個小圖像下拉列表,用戶選擇和圖像並使用drawImage()將其繪制到畫布上;

我似乎無法弄清楚如何將事件監聽器添加到畫布上新繪制的圖像。

我試過把它放在一個變量中:

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

然後添加一個eventlistener,但它似乎不起作用。

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

這樣做的正確方法是什麽。

最佳答案

If you're looking for this sort of interactivity,

is probably not what you want. You're looking for SVG. There is a fantastic library called Raphaël that makes working with SVG a piece of cake on all browsers, even on IE6. It's also completely compatible with jQuery, so you can do:
var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);

I'm pretty certain this will treat you better and be easier to use than

.

註意:Raphaël確實附帶了一些基本事件的助手,比如“click”和“mousedown”,只需要執行 img.click(onImgClick),但是如果你已經使用了像jQuery這樣的庫,你可能是,我建議保持一致並使用庫的事件處理。

轉載註明原文: html5,將eventlistener添加到畫布上的繪制圖像