Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器

由于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元素的效果（图标）会变化，激活相关事件函数。