之前那篇Canvas畫圖-滑鼠塗鴉已經可以實現與Canvas的簡單互動，這篇會介紹Canvas中實現互動性的一個重要方法isPointInPath。
基本原理
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中不管你搞什麼么蛾子，都要按照之前的規則把所有路徑繪製一遍。
上個效果圖：
完整程式碼：