canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

canvas 里绘制的图形不是一个实体 DOM，所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多。

所以，我们需要使用一个 canvas 的 isPointInPath(x, y) 方法，来获取鼠标相对于浏览器的坐标，然后还需要计算出鼠标相对于 canvas 画布的坐标，最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上，进行相应的操作。

isPointInPath() 方法是针对的当前绘制的路径，而鼠标在执行操作的时候，我们会根据需要监听鼠标的事件，当鼠标事件符合我们要求的时候，就对画布进行重绘。在重绘的时候，每画一条路径就调用一次 isPointInPath(x, y) 方法，判断鼠标操作的点是不是在这个绘制的元素身上，如果在，就可以对当前绘制的这个元素进行自定义操作了。

以下是绘制两个图形，并监听 mousemove 事件，来判断鼠标是否在图形上的 demo：

<style type="text/css">
*{
    margin:0;padding:0;}
.canvas-box {
    position: relative;}
canvas {