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

Question

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

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

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

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

然后添加一個eventlistener，但它似乎不起作用。

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

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

Answer 1

如果您正在尋找這種交互性， <canvas>可能不是您想要的。 你在找SVG 。 有一個名為Raphaël的神奇圖書館，即使在IE6上，也能讓SVG在所有瀏覽器上都是一塊蛋糕。 它也與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而不是畫布。

Answer 3

要在沒有JS幫助的情況下這樣做：

雖然您無法將事件偵聽器附加到您調用drawImage（）的上下文中; 您可以將事件偵聽器附加到Canvas本身。

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

如果您需要繪制每個圖像，則可以堆疊畫布對象並為您繪制的每個圖像創建一個新對象。