在畫布上繪制一些效果的時候，會需要用到畫布上的鼠標的位置.

會用到的知識點：

1. .getBoundingClientRect(), 這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離

　　var box=document.getElementById(‘box‘); // 獲取元素

　　alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離

　　alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離

　　alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離

　　alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離

註意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。

document.documentElement.clientTop; // 非IE為0，IE為2

document.documentElement.clientLeft; // 非IE為0，IE為2

function gGetRect (element) {

var rect = element.getBoundingClientRect();

var top = document.documentElement.clientTop;

var left= document.documentElement.clientLeft;

return{

top : rect.top - top,

bottom : rect.bottom - top,

left : rect.left - left,

right : rect.right - left

}

}

封裝成一個函數：

var canvas = document.getElementById(‘canvas‘);//獲取畫布對象

var cxt = canvas.getContext(‘2d‘);//繪制環境

canvas.addEventListener(‘mousemove‘, function(e){

　　var ev = e || window.event;//兼容性處理

　　var canvasResult = windowToCanvas(canvas, ev.clientX, ev.clientY);//調用函數, ev.clientX是相對於瀏覽器窗口左上角的x坐標,ev.clientY是相對於瀏覽器窗口左上角的y坐標

}, false);

function windowToCanvas(canvas, x, y) {

　　var canvasBox = canvas.getBoundingClientRect();

　　var canvasX = Math.abs(x - canvasBox.left);

　　var canvasY = Math.abs(y - canvasBox.top);

　　return {x: canvasX, y: canvasY};

}

獲取畫布上的鼠標位置