基本原理
Cavnas的確能實現很多很酷炫狂拽屌炸天的效果，但是交互性要差很多，簡單的鼠標單擊選中某個圖形，都要花費一番周折。
Canvas只是一個dom節點，所有監聽的事件都只能綁定在這個節點上，但是我們可能需要對Canvas上的某個元素進行操作。基本的原理就是事件還是綁定在Canvas上，通過判斷點擊發生的位置是否在Canvas中某個圖形的路徑內(這里注意，我沒有說是某個圖形的區域內)，從而進一步確定是在哪個圖形上戳來戳去。
isPointInPath
為了讓我們判斷點擊點到底是否在路徑內，Canvas提供了context.isPointInPath(x,y)
方法，參數自然是某個點的橫豎坐標。
來個例子，先隨便畫三個矩形：
var rectList = [ [50,50,50,50], [120,120,80,60], [30,150,60,80] ];var drawRect = function(x,y,w,h){ ctx.beginPath(); ctx.rect(x,y,w,h); }
// init
ctx.clearRect(0, 0,canvas.width(), canvas.height());
$.each(rectList, function(n,v){
drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]);
ctx.stroke();
});
另外再寫個getCanvasPoint
方法，主要把點擊坐標換算成Canvas里面的坐標：
var getCanvasPoint = function(x,y) { var canvasOffset = canvas.offset(); return { x: x - canvasOffset.left, y: y - canvasOffset.top } }
是時候該isPointInPath
方法登場，實現點中某個矩形的時候改變矩形邊框的顏色
canvas.on("mousedown", function(e){ moving = true; var point = getCanvasPoint(e.pageX, e.pageY); $.each(rectList, function(n, v) { drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]); if(ctx.isPointInPath(point.x, point.y)){ moveItem = n; startPos.x = point.x; startPos.y = point.y; ctx.strokeStyle = "#ff4444"; } else { ctx.strokeStyle = "#000"; } ctx.stroke(); }) });
這里我們從預定義的rectList
中依次拿出每個長方形參數，分表是左上角的x坐標，y坐標，長，寬。然后先畫出長方形的路徑，畫完一個用isPointInPath
方法判斷一下點擊點是否在當前路徑中，如果在，就給當前的改顏色，如果不在就畫出來然后繼續畫下一個長方形繼續判斷路徑。
是不是很麻煩，isPointInPath
只對當前路徑有效,也就說我們不能把三個長方形都畫完了再判斷某個點是否在第一個長方形路徑中，而必須是每次畫完一個長方形就要判斷一次，而且Canvas中路徑是不能保存的，要改變某一條路徑，就必須把整個Canvas重新畫一遍。
所以這里我們在循環中不單單是繪制了點中的長方形，還要繪制沒點的長方形。
拖動元素
基本原理就是上面那樣，看到這里，你已經洞悉了Canvas實現點擊等事件的小秘密。那我們就繼續實現拖動其中的元素吧。
canvas.on("mousemove", function(e){ if( !moving && moveItem == null ) { return; } ctx.clearRect(0, 0,canvas.width(), canvas.height()); var point = getCanvasPoint(e.pageX, e.pageY); $.each(rectList, function(n, v) { var moveX = 0, moveY = 0; if(n !== moveItem ){ ctx.strokeStyle = "#000"; } else { moveX = point.x - startPos.x; moveY = point.y - startPos.y; ctx.strokeStyle = "#ff4444"; } drawRect(rectList[n][0] + moveX,rectList[n][1] + moveY,rectList[n][2],rectList[n][3]); ctx.stroke(); }) });
依然是熟悉的味道，依然是熟悉的配方。我們還是依賴mousemove方法，移動端請用touchmove方法。
因為之前在點擊的時候我們已經把是哪個長方形被選中給保存在變量moveItem中了，所以這里就直接判斷就好了。是要拖動的元素就把長方形的x,y對應拖動的距離進行更新。同樣是要把整個Canvas都繪制一遍。
另外在mouseup事件中保存下狀態，方便下次繪畫:
canvas.on("mouseup", function(e){ moving = false; $.each(rectList, function(n){ if (n == moveItem){ var point = getCanvasPoint(e.pageX, e.pageY); rectList[n][0] += point.x - startPos.x; rectList[n][1] += point.y - startPos.y; } }); startPos = {} moveItem = null });
記住：在Canvas中不管你搞什么幺蛾子，都要按照之前的規則把所有路徑繪制一遍。
完整代碼：
https://github.com/bob-chen/canvas-demo/blob/master/basic/movebymouse.html
參考
http://jo2.org/html5-canvas-ispointinpath/
