canvas 鼠标移动矩形

   自己实现了在canvas下创建一个矩形，鼠标选中矩形框时可以拖动（矩形会变色，而且做了一点边界处理，还需要优化）。

   这里对于事件的监听和解除监听可以用addEventListener，removeEventListener。

例如： addEventListener("mousemove",moveHandler); //这个方法其实可以添加多个触发事件，addEventListener中的第三个参 数是useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture方式(由外向里)。

           removeEventListener("mousemove",moveHandler);

需要注意的是，这里传函数参数时需要用函数声明的形式，不能用匿名函数的形式。

PS：因为第二个参数需要是相同的参数（即指向相同的地址），如果传匿名函数，其实是2个功能相同，但是地址不一样的函数；

当我们配合限流函数throttle 使用的时候我开始因为没理解上面这个原因，所以出了错；配合限流函数的正确使用方法如下：

    var _fn=throttle(fn,100);
    c.addEventListener("mousemove",_fn)
    function fn(){
           console.log("liuzj"); 
    }
   
    c.removeEventListener("mousemove",_fn)

由于canvas画出的图形是没有返回对象的，这里我是用了isPointInPath这个函数来判断当前鼠标的位置坐标是否在矩形框包含的坐标范围内还有我们获取鼠标位置的时候我们需要用这样的方式去获取（使得我们的坐标是相对于画布而不是浏览器，因为我们画图是相对于画布这个坐标系画的。）

           x=e.clientX-c.getBoundingClientRect().left;   //这个c是canvas的dom对象，并不是getContext（2d）返回的对象。
           y=e.clientY-c.getBoundingClientRect().top;