为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画布的位置。
再为画布绑定事件,判断鼠标位置是否落入图像范围就可以了。