畫布內元素中的事件

Question

我在畫布標籤內畫了一個圖像。我如何添加事件？我想在用戶點擊圖片時做點什麼。

character.addEventListener('click', function() { alert('foo'); }, true); 
/* character is a var (image object) within a canvas */ 

謝謝。

Answer 1

無法將事件處理程序添加到畫布上的實際圖形。您可以處理整個畫布的事件 - 就是這樣。

您現在的選擇是在畫布上添加一個抽象，並根據畫布點擊事件的座標查找圖形，或者完全放下畫布， SVG。 Raphaël圖書館（http://raphaeljs.com/）可以幫助你。

Answer 2

get click event of each rectangle inside canvas?

更進一步，我發現，這個答案並不在Mozilla工作。

改爲使用clientX而不是offsetX。

實施例，我已經在建立動態畫布圖像畫廊在github：https://github.com/michaelBenin/fi-test

每次窗口大小我重新計算X，Y，每個圖像的繪製，從那裏我運行碰撞功能，當畫布被點擊。

基本上，您可以從click事件中獲取x，y值，並檢查畫布上是否有任何這些座標。

下面是關於註冊帆布內單擊事件的另一個很好的鏈接：http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/

Answer 3

見一擊鏈接，有一個樣品

http://www.html5canvastutorials.com/cookbook/ch6/1369_06_03/

見第