為canvas圖像綁定事件

之前看到鑫神有一篇介紹tween.js用法的博客里有一個點擊各個小球實現運動效果的demo，自己實現時發現咦怎么把點擊事件綁定在小球上啊（鑫神博客里的小球不是canvas畫出來的），此時的html里只有畫板畫布（canvas元素）。谷歌了一下然后自己成功實現啦，在這里記錄一下。

基本思路就是，獲取到鼠標所在的相對於canvas畫布的位置，判斷是不是在圖像覆蓋的范圍內，如果在就觸發事件。

先獲取鼠標位置

		var c=document.getElementById("mycanvas");
		var ctx=c.getContext("2d");

		function getMousePos(c,e){
			var rect=c.getBoundingClientRect();
			return {
				x:e.clientX-rect.left,
				y:e.clientY-rect.top
			}
		}

getBoundingClientRect()方法返回矩形對象，包括6個屬性：left,top,right,bottom,width,height. 表示該元素相對於視口的位置，其中right指的元素右邊
界距離窗口最左邊的距離，bottom指的是元素下邊界距離窗口最上邊的距離。
這樣返回的對象就為鼠標相對於canvas畫布的位置。

再為畫布綁定事件，判斷鼠標位置是否落入圖像范圍就可以了。