html5 canvas事件處理（用event.layerX和layerY屬性表示Canvas內部座標系中的座標）

DOM是Web前端領域非常重要的組成部分，不僅在處理HTML元素時會用到DOM，圖形程式設計也同樣會用到。比如SVG繪圖，各種圖形都是以DOM節點的形式插入到頁面中，這就意味著可以使用DOM方法對圖形進行操作。比如有一個<path id=”p1″>元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而這種DOM處理方法在HTML5的Canvas裡不再適用，Canvas使用的是另外一套機制，無論在Canvas上繪製多少圖形，Canvas都是一個整體，圖形本身實際都是Canvas的一部分，不可單獨獲取，所以也就無法直接給某個圖形增加JavaScript事件。

推薦閱讀相關Canvas文章：

• HTML5實踐之Canvas線條
• 利用HTML5中Canvas處理並儲存圖片

Canvas的限制

在Canvas裡，所有圖形都繪製在幀上，繪製方法不會將繪製好的圖形元素作為一個返回值輸出，js也無法獲取到已經繪製好的圖形元素。比如：

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
theRect = ctx.rect(10, 10, 100, 100);
ctx.stroke();
console.log(theRect);     //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.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

接下來需要判斷事件物件發生的位置，事件物件e的layerX和layerY屬性表示Canvas內部座標系中的座標。但是這個屬性Opera不支援，Safari也打算移除，所以要做一些相容寫法：

function getEventPosition(ev){
  var x, y;
  if (ev.layerX || ev.layerX == 0) {
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }
  return {x: x, y: y};
}
//注：使用上面這個函式，需要給Canvas元素的position設為absolute。

現在有了事件物件的座標位置，下面就要判斷Canvas裡的圖形，有哪些覆蓋了這個座標。

isPointInPath方法

Canvas的isPointInPath方法可以判斷當前上下文的圖形是否覆蓋了某個座標，比如：

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(50, 50);     //true
ctx.isPointInPath(5, 5);     //false

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

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  if(ctx.isPointInPath(p.x, p.y)){
    //點選了矩形
  }
}, false);

以上就是處理Canvas事件的基本方法，但是上面的程式碼還有侷限，由於isPointInPath方法僅判斷當前上下文環境中的路徑，所以當Canvas裡已經繪製了多個圖形時，僅能以最後一個圖形的上下文環境來判斷事件，比如：

cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.isPointInPath(20, 20);     //true
ctx.beginPath();
ctx.rect(110, 110, 100, 100);
ctx.stroke();
ctx.isPointInPath(150, 150);     //true
ctx.isPointInPath(20, 20);     //false 

從上面這段程式碼可以看到，isPointInPath方法僅能識別當前上下文環境裡的圖形路徑，而之前繪製的路徑，無法回溯判斷。這種問題的解決方法是：當點選事件發生時，重繪所有圖形，每繪製一個就使用isPointInPath方法，判斷事件座標是否在該圖形覆蓋範圍內。

迴圈重繪和事件冒泡

為了實現迴圈重繪，所以就要將圖形的基本引數事先儲存下來：

arr = [
  {x:10, y:10, width:100, height:100},
  {x:110, y:110, width:100, height:100}
];
 
cvs = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
 
draw();
 
function draw(){
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
  });
}

上面的程式碼事先將兩個矩形的基本引數儲存下來，每次呼叫draw方法，就會迴圈呼叫這些基本引數，用於繪製兩個矩形。這裡還使用了clearRect方法，用於在重繪時清空畫布。接下來要做的是增加事件代理，以及在重繪時對每一個上下文環境使用isPointInPath方法：

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  draw(p);
}, false);

事件發生時，將事件物件的座標傳給draw方法處理。這裡還需要對draw方法做一些小改動：

cvs.addEventListener('click', function(e){
  p = getEventPosition(e);
  draw(p);
}, false);

在上面程式碼中，點選事件發生時draw方法會執行一次重繪，並在重繪過程中檢查每一個圖形是否覆蓋了事件座標，如果判斷為真，則視為點選了該圖形，並將該圖形的index值放入陣列，最後將陣列作為draw方法的返回值。在這種處理機制下，如果Canvas裡有N個圖形，它們有一部分是重疊的，而點選事件恰巧發生在這個重疊區域上，那麼draw方法的返回陣列裡會有N個成員。這時就有點類似事件冒泡的情況，陣列的最後一個成員處於Canvas最上層，而第一個成員則在最下層，我們可以視為最上層的成員是e.target，而其他成員則是冒泡過程中傳遞到的節點。當然這只是最簡單的一種處理方法，如果真要模擬DOM處理，還要給圖形設定父子級關係。

以上就是Canvas事件處理的基本方法。在實際運用時，如何快取圖形引數，如何進行迴圈重繪，以及如何處理事件冒泡，都還需要根據實際情況花一些心思去處理。另外，click是一個比較好處理的事件，相對麻煩的是mouseover、mouseout和mousemove這些事件，由於滑鼠一旦進入Canvas元素，始終發生的都是mousemove事件，所以如果要給某個圖形單獨設定mouseover或mouseout，還需要記錄滑鼠移動的路線，給圖形設定進出狀態。由於處理的步驟變得複雜起來，必須對效能問題提高關注。