畫布中元素中的事件

Question

我已經在canvas標簽內繪制了圖像。 如何向其中添加事件？ 當用戶單擊該圖像時，我想做些事情。

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

謝謝。

Answer 1

獲取畫布內每個矩形的點擊事件？

此外，我發現此答案在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 2

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

此時，您的選擇是在畫布上添加一個抽象，然后基於畫布單擊事件中的坐標查找在其中具有的繪圖-或完全放下畫布並使用svg。 Raphaël庫（http://raphaeljs.com/）可以為您提供幫助。

Answer 3

見吹鏈接，有一個樣本

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

查看頁面來源