本文格式為Word版，下載可任意編輯——HTML5中Canvas的事件處理介紹HTML5中Canvas的事情處理介紹

DOM是Web前端領域分外重要的組成片面，不僅在處理HTML元素時會用到DOM，圖形編程也同樣會用到。譬如SVG繪圖，各種圖形都是以DOM節點的形式插入到頁面中，這就意味著可以使用DOM方法對圖形舉行操作。譬如有一個元素，可以直接用jquery增加click事情$#p1.clickfunction。然而這種DOM處理方法在HTML5的Canvas里不再適用，Canvas使用的是另外一套機制，無論在Canvas上繪制多少圖形，Canvas都是一個整體，圖形本身實際都是Canvas的一片面，不成單獨獲取，所以也就無法直接給某個圖形增加JavaScript事情。

Canvas的限制

在Canvas里，全體圖形都繪制在幀上，繪制方法不會將繪制好的圖形元素作為一個返回值輸出，js也無法獲取到已經繪制好的圖形元素。譬如：

代碼如下:

cvs=document.getElementByIdmycanvas;

ctx=canvas.getContext2d;

theRect=ctx.rect10,10,100,100;

ctx.stroke;

console.logtheRect;//undefined

這段代碼在canvas標簽里繪制了一個矩形，首先可以看到繪制圖形的rect方法沒有返回值。假設開啟欣賞器的開發者工具，還可以看到canvas標簽內部沒有增加任何內容，而在js里獲取到的canvas元素以及當前的上下文，也都沒有任何表示新增圖形的內容。

所以，前端常用的dom方法在canvas里是不適用的。譬如點擊上面Canvas里的矩形，實際點擊的是整個Canvas元素。

給Canvas元素綁定事情

由于事情只能達成Canvas元素這一層，所以，假設想進一步深入，識別點擊發生在Canvas內部的哪一個圖形上，就需要增加代碼來舉行處理。根本思路是：給Canvas元素綁定事情，當事情發生時，檢查事情對象的位置，然后檢查哪些圖形籠罩了該位置。譬如上面的例子里畫過一個矩形，該矩形籠罩x軸10-110、y軸10-110的范圍。只要鼠標點擊在這個范圍里，就可以視為點擊了該矩形，也就可以手動觸發矩形需要處理的點擊事情。思路其實對比簡樸，但是實現起來還是稍微有點繁雜。不僅要考慮這個判斷過程的效率，有些地方還需要重新判斷事情類型，設置要重新定義一個Canvas內部的捕獲和冒泡機制。

首先要做的，是給Canvas元素綁定事情，譬如Canvas內部某個圖形要綁定點擊事情，就需要通過Canvas元素代理該事情：

代碼如下:

cvs=document.getElementByIdmycanvas;

cvs.addEventListenerclick,functione

//...

,false;

接下來需要判斷事情對象發生的位置，事情對象e的layerX和layerY屬性表示Canvas內部坐標系中的坐標。但是這個屬性Opera不支持，Safari也計劃移除，所以要做一些兼容寫法：

代碼如下:

functiongetEventPositionev

varx,y;

ifev.layerX||ev.layerX==0

x=ev.layerX;

y=ev.layerY;

elseifev.offsetX||ev.offsetX==0//Opera

x=ev.offsetX;

y=ev.offsetY;

returnx:x,y:y;

//注：使用上面這個函數，需要給Canvas元素的position設為absolute。

現在有了事情對象的坐標位置，下面就要判斷Canvas里的圖形，有哪些籠罩了這個坐標。

isPointInPath方法

Canvas的isPointInPath方法可以判斷當前上下文的圖形是否籠罩了某個坐標，譬如：

代碼如下:

cvs=document.getElementByIdmycanvas;

ctx=canvas.getContext2d;

ctx.rect10,10,100,100;

ctx.stroke;

ctx.isPointInPath50,50;//true

ctx.isPointInPath5,5;//false

接下來增加一個事情判斷，就可以判斷一個點擊事情是否發生在矩形上：

代碼如下:

cvs.addEventListenerclick,functione

p=getEventPositione;

ifctx.isPointInPathp.x,p.y

//點擊了矩形

,false;

以上就是處理Canvas事情的根本方法，但是上面的代碼還有局限，由于isPointInPath方法僅判斷當前上下文環境中的路徑，所以當Canvas里已經繪制了多個圖形時，僅能以結果一個圖形的上下文環境來判斷事情，譬如：

代碼如下:

HTML5中Canvas的事情處理介紹

cvs=document.getElementByIdmycanvas;

ctx=canvas.getContext2d;

ctx.beginPath;

ctx.rect10,10,100,100;

ctx.stroke;

ctx.isPointInPath20,20;//true

ctx.beginPath;

ctx.rect110,110,100,100;

ctx.stroke;

ctx.isPointInPath150,150;//true

ctx.isPointInPath20,20;//false

從上面這段代碼可以看到，isPointInPath方法僅能識別當前上下文環境里的圖形路徑，而之前繪制的路徑，無法回溯判斷。這種問題的解決方法是：當點擊事情發生時，重繪全體圖形，每繪制一個就使用isPointInPath方法，判斷事情坐標是否在該圖形籠罩范圍內。

循環重繪和事情冒泡

為了實現循環重繪，所以就要將圖形的根本參數事先保存下來：

代碼如下:

arr=[

x:10,y:10,width:100,height:100,

x:110,y:110,width:100,height:100

];

cvs=document.getElementByIdmycanvas;

ctx=canvas.getContext2d;

draw;

functiondraw

ctx.clearRech0,0,cvs.width,cvs.height;

arr.forEachfunctionv

ctx.beginPath;

ctx.rectv.x,v.y,v.width,v.height;

ctx.stroke;

;

上面的代碼事先將兩個矩形的根本參數保存下來，每次調用draw方法，就會循環調用這些根本參數，用于繪制兩個矩形。這里還使用了clearRect方法，用于在重繪時清空畫布。接下來要做的.是增加事情代理，以及在重繪時對每一個上下文環境使用isPointInPath方法：

代碼如下:

cvs.addEventListenerclick,functione

p=getEventPositione;

drawp;

,false;

事情發生時，將事情對象的坐標傳給draw方法處理。這里還需要對draw方法做一些小改動：

代碼如下:

functiondrawp

varwho=[];

ctx.clearRech0,0,cvs.width,cvs.height;

arr.forEachfunctionv,i

ctx.beginPath;

ctx.rectv.x,v.y,v.width,v.height;

ctx.stroke;

ifpctx.isPointInPathp.x,p.y

//假設傳入了事情坐標，就用isPointInPath判斷一下

//假設當前環境籠罩了該坐標，就將當前環境的index值放到數組里

who.pushi;

;

//根據數組中的index值，可以到arr數組中找到相應的元素。

returnwho;

在上面代碼中，點擊事情發生時draw方法會執行一次重繪，并在重繪過程中檢查每一個圖形是否籠罩了事情坐標，假設判斷為真，那么視為點擊了該圖形，并將該圖形的index值放入數組，結果將數組作為draw方