由于Canvas的 ”忘记式“ 绘图机制(就是它没有维护一份绘制元素的列表)。
如果仅仅检测用户是否点击整个canvas元素,只需在canvas上注册事件就好。
如果是要分别检测canvas里绘制的不同元素的鼠标点击事件,则要用下面的做法,实现一个元素管理器。
一.原理分析
1.canvas元素能提供的一个api是,context.isPointInPath(x,y),它可以判断参数的点是否在当前路径内。
2.当前路径指的是最近一次调用context.beginPath();当前路径context.closePath();中间部分的路径代码就是当前路径。
3.元素管理器维护一个元素列表,每次用户点击时,都遍历这个列表,为列表里的元素创建路径,与当前点做检测,直到找到相应的元素。
4.元素必须自己实现相应的函数:
//1.创建自身路径:createPath(context);
//2.绘制自身:drawSelf(context);
//3.点击时的时间处理:beClick();
二.效果截图
这是一个简单播放器,点击后,canvas元素的效果(图标)会变化,激活相关事件函数。