一、給Canvas元素繫結事件基礎知識

由於事件只能達到Canvas元素這一層，所以，如果想進一步深入，識別點擊發生在Canvas內部的哪一個圖形上，就需要增加程式碼來進行處理。

基本思路是：給Canvas元素繫結事件，當事件發生時，檢查事件物件的位置，然後檢查哪些圖形覆蓋了該位置。只要滑鼠點選在這個範圍裡，就可以視為點選了該矩形，也就可以手動觸發矩形需要處理的點選事件。

第一步：封裝一個獲取事件物件位置的函式getEventPosition()

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新增點選事件

cvs = document.getElementById('mycanvas');
cvs.addEventListener('click', function(e){
  //...
}, false);

第三步:判斷事件物件的座標是否在圖形內：

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
 

注意：canvas中繪製多個圖形時，isPointInPath()只能判斷事件物件的位置是否在最後一個繪製的圖形上，而之前繪製的圖形已經無法判斷

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
 

二.當canvas繪製多個圖形時的點選事件

具體思路：當點選事件發生時，重繪所有圖形，每繪製一個就使用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');
 

第二步：新增點選事件

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

第三步：每次點選時重繪圖形

//圖形繪製
function draw(p){
  var who = [];//儲存點選事件包含圖形的index值
  ctx.clearRect(0, 0, cvs.width, cvs.height);
  arr.forEach(function(v, i){
    ctx.beginPath();
    ctx.rect(v.x, v.y, v.width, v.height);
    ctx.stroke();
    if(p && ctx.isPointInPath(p.x, p.y)){
      //如果傳入了事件座標，就用isPointInPath判斷一下
      //如果當前環境覆蓋了該座標，就將圖形的index放到數組裡
      who.push(i);
    }
  });
  //根據陣列中的index值，可以到arr陣列中找到相應的元素。
  return who;
}

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