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

回答