canvas 滑鼠移動矩形
自己實現了在canvas下建立一個矩形，滑鼠選中矩形框時可以拖動（矩形會變色，而且做了一點邊界處理，還需要優化）。
這裡對於事件的監聽和解除監聽可以用addEventListener，removeEventListener。
例如： addEventListener("mousemove",moveHandler); //這個方法其實可以新增多個觸發事件，addEventListener中的第三個參 數是useCapture, 一個bool型別。當為false時為冒泡獲取(由裡向外)，true為capture方式(由外向裡)。
removeEventListener("mousemove",moveHandler);
需要注意的是，這裡傳函式引數時需要用函式宣告的形式，不能用匿名函式的形式。
PS：因為第二個引數需要是相同的引數（即指向相同的地址），如果傳匿名函式，其實是2個功能相同，但是地址不一樣的函式；
當我們配合限流函式throttle 使用的時候我開始因為沒理解上面這個原因，所以出了錯；配合限流函式的正確使用方法如下：
var _fn=throttle(fn,100); c.addEventListener("mousemove",_fn) function fn(){ console.log("liuzj"); } c.removeEventListener("mousemove",_fn)
由於canvas畫出的圖形是沒有返回物件的，這裡我是用了isPointInPath這個函式來判斷當前滑鼠的位置座標是否在矩形框包含的座標範圍內還有我們獲取滑鼠位置的時候我們需要用這樣的方式去獲取（使得我們的座標是相對於畫布而不是瀏覽器，因為我們畫圖是相對於畫布這個座標系畫的。）
x=e.clientX-c.getBoundingClientRect().left; //這個c是canvas的dom物件，並不是getContext（2d）返回的物件。
y=e.clientY-c.getBoundingClientRect().top;
<!doctype html> <html> <head> </head> <body onselectstart="return false;"> <canvas id="demoCanvas" style="background-color:#e4e4e4"></canvas> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var c=document.getElementById("demoCanvas"); var ctx=c.getContext("2d"); var canvasWidth = 500; var canvasHeight = 600; var rectWidth=150; var rectHeight=100; c.width = canvasWidth; c.height = canvasHeight; var x;//滑鼠在canvas上的X座標 var y;//滑鼠在canvas上的Y座標 var dis_x;//滑鼠點選位置相對於矩形的位置 var dis_y;//滑鼠點選位置相對於矩形的位置 var s_x=20;//矩形座標X var s_y=20;//矩形座標Y var lineWidth=2; var isImpact=false;//碰撞標誌 var isDowm=false;//滑鼠按下標誌 var throttle = function(callback,delay){ var last = 0 return function(){ var curr = new Date().getTime(); if (curr - last > delay){ callback.apply(this, arguments) last = curr } } } function draw(){ ctx.clearRect(0,0,canvasWidth,canvasHeight); if(!isDowm){ ctx.strokeStyle="#000"; } else{ ctx.strokeStyle="#e03"; } ctx.lineWidth=lineWidth; ctx.beginPath(); ctx.rect(s_x,s_y,rectWidth,rectHeight); ctx.stroke(); } function checkImpact(){ if(!(x-dis_x<lineWidth||x-dis_x>canvasWidth-rectWidth-lineWidth||y-dis_y<lineWidth||y-dis_y>canvasHeight-rectHeight-lineWidth)){ return true; } else{ return false; } } $(c).mousedown(function(e){ isDowm=true; x=e.clientX-c.getBoundingClientRect().left; y=e.clientY-c.getBoundingClientRect().top; if(ctx.isPointInPath(x,y)) { dis_x=x-s_x; dis_y=y-s_y; draw(); $("body").mousemove(throttle(function(e){ x=e.clientX-c.getBoundingClientRect().left; y=e.clientY-c.getBoundingClientRect().top; if(checkImpact()) { s_x=x-dis_x; s_y=y-dis_y; draw(); } },17)); $("body").mouseup(function(){ isDowm=false; draw(); $(this).unbind("mouseup") $(this).unbind("mousemove") }) } }) $(function(){ draw(); }) </script> </body> </html>