前端拖拽换位置并保存_前端图形学（十五）——小球的拖拽和投掷

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

上一章节我们给小球添加了事件处理逻辑，那么本章节我们来实现两个关于事件的深入应用。

在传统的dom操作中，我们也经常会用到拖拽的相关操作，那么应用到Canvas中来，原理也是一样的。

拖拽

如上图，我们可以把一个小球拖来拖去的。看似有些无聊乏趣。但是拖拽却是我们很多实际项目开发的最基础的知识点。比如移动端的滑动事件，大名鼎鼎的ISroll库等，他们实现的的滑动都有着拖拽的影子。

原理：鼠标在小球上按下，然后鼠标移动，小球跟随移动，鼠标抬起，拖拽结束。那么在拖拽的过程中，我们会发现有一个是恒定不变的，那就是鼠标的位置和小球的圆心的位置的距离。那么我们可以很容易的获取到鼠标的位置，那么要求出小球的位置就很容易了。

1. 给Canvas画布添加mousedown mousemove mouseout事件。
2. 在鼠标