为了追踪所画内容，诸如画图应用程序、计算机辅助设计系统（computer-aided design system 简称CAD系统）以及游戏等许多应用程序，都会维护一份包含当前显示对象的列表。通常来说，这些应用程序都允许用户对当前显示在屏幕上的物体进行操作。比方说，在CAD应用程序中，我们可以对设计中的元素进行选择、移动、缩放等操作
——《HTML5 Canvas核心技术》
在Canvas中
实现拖拽 也同样如此，Canvas提供了一个名为
isPointInPath(x, y) 的API，判断
点(x, y) 是否在路径之中。如果在路径之中，则返回true。于是我们可以有如下思路：维护一个可以描述各个路径的
数组 ，通过
ispointInPath(x, y) 判断点击位置是否在某一个路径之中，如果在此路径之中，选中此路径，进行操作(移动、缩放等)，再绘制图形此文我以
多边形拖拽为例进行说明 ，Demo如下（后面的印子是录屏软件的原因:japanese_ogre:）：
CodePen打开
Demo中的多边形如何绘制之前做过总结，不再赘述:ghost:：Canvas多边形绘制
思路说明
下图给了大致的说明及伪代码，思路并不难，但有部分细节需要处理
代码结构说明
此处列举代码结构及标注其思路，更详细的代码注释已在CodePen之中
因为本文重点在拖拽(drag)，所以对绘图部分描述会较少
//绘制多边形路径函数
function drawPolygonPath//多边形类定义
class Polygon{
...
}
//根据点击事件返回在canvas中的位置
function positoinInCanvas
//获取两点间直线距离
function getDistance
//开始阶段，记录拖拽对象
canvas.onmousedown
//拖拽阶段，画路径，描边
canvas.onmousemove
//结束阶段，更新拖拽对象位置
canvas.onmouseup
关键部分说明
接下来开始代码中的关键部分及细节处理
如何维护拖拽对象数组
在程序初始化时，我们定义一个polygonArray数组
polygonArray = []在每次画一个新的多边形之后，都会new一个多边形对象推入数组中进行维护
