draggingPolygon.centerY += diff.get('offsetY');
接着清空画布进行绘制新的路径和描边
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let polygon of polygonArray) {
drawPolygonPath(polygon.sideNum,
polygon.radius,
polygon.centerX,
polygon.centerY, ctx);
ctx.stroke();
}最后使用到上文中的
tempCenterX 与
tempCenterY ：
draggingPolygon.centerX = tempCenterX;
draggingPolygon.centerY = tempCenterY;为什么需要这么做呢？
因为我们的拖拽是
基于多边形的原位置 ,而
mousemove 阶段并
不能确定函数的最终位置 ，如果这时没有复原的话，会出现
"漂移" ，我把这两行代码注释掉，效果如下：
如果我没说清楚，墙裂推荐大家对代码进行修改和调试
拖拽后的处理
拖拽完成后是处于
mouseup 阶段，此时我们已经确定dragginPolygon的最终位置，进行更新即可，最后置为null，排除
在没有拖拽多边形情况下，鼠标在画布上移动触发对应代码
const
pos = positionInCanvas(e, canvasLeft, canvasTop),
offsetMap = new Map([
['offsetX', pos.x - mouseStart.get('x')],
['offsetY', pos.y - mouseStart.get('y')]]);
draggingPolygon.centerX += offsetMap.get('offsetX');
draggingPolygon.centerY += offsetMap.get('offsetY');
draggingPolygon = null;结语
其实这个功能实现并不难，关键是了解一个概念：通过维护当前显示对象的列表及isPointInPath进行判断来实现追踪
最后欢迎大家交流学学习
参考资料
《HTML5 Canvas核心技术》
