web前端入门（四）-canvas图形拖拽事件

概述

  在 canvas 中绘制图形后，可以给 canvas 添加事件响应函数，并判断事件是否发生在canvas内部所绘制的图形中，从而给 canvas 中绘制图形添加事件处理。
  很多情况下有鼠标拖拽图形的需求，如果是单个图形、不重叠图形，鼠标拖拽功能还较易实现。但在 canvas 中有图形存在重叠的情况下，鼠标点击的图形以及绘制区域的清除等操作，都不容易实现。此文首先讲解基本的鼠标拖拽功能的实现，再进一步说明如何处理 canvas 图形重叠时的鼠标拖拽功能。

鼠标拖拽canvas中的图形

要实现鼠标拖拽 canvas 中的图形功能，整个逻辑为：

1. canvas响应 mousedown 事件，判断鼠标点击点是否在canvas绘制的图形内，如不在则不处理；
2. 用一个全局变量标记当前为拖拽状态，并记录被点击图形当前位置和鼠标当前位置。

var curMouseX;//记录当前鼠标X坐标
var curMouseY;//记录当前鼠标Y坐标
var curId;//当前被拖拽的图形所属的 canvas 的ID；
 if(ctx.isPointInPath(e.clientX-$(this).offset().left,e.clientY-$(this).offset().top))//需要计算鼠标在canvas中的位置
     {
             bDrag=true;
             curId=$(this).attr("id");
             return false;
      }

3. document 监听 mousemove 事件，清除 canvas 中的图形，并在鼠标