为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画布的位置。

再为画布绑定事件，判断鼠标位置是否落入图像范围就可以了。