导读：在上一节中我们介绍了如何捕获一个物体，并且对物体进行拖拽。首先，我们在小球的原型对象上添加了一个方法getBounds()，该方法的作用是返...

在上一节中我们介绍了如何捕获一个物体，并且对物体进行拖拽。首先，我们在小球的原型对象上添加了一个方法getBounds()，该方法的作用是返回一个对象，该对象内包含小球的坐标和长宽属性值，并且在我们的工具函数utils.js中也添加了一个方法containPoints(rect, x, y),该方法传入3个参数:对象rect,坐标x和y，返回一个布尔值用于判定我们的鼠标是否点击在了小球上。

然后，我们为canvas添加监听事件，当鼠标点击到了小球上时，判定为小球被鼠标捕获，这时如果你移动鼠标小球就会随着鼠标的位置而移动，当鼠标抬起移除监听事件，小球不再随鼠标移动，这样就完成了我们移动物体的目的。这一节我们主要介绍：

在上一节中我们知道了，如何移动一个物体。那么，这一节我们更深入些，首先就来探讨如何捕获一个运动的物体。不过总体的思路还是沿用上一节已经搭建好的框架，我们所要做的就是发挥我们的想象力。。。

现在我们理一下要完成这个动画需要做哪些事情。

ok，现在我们来做代码上的实现！首先是前两步：
 

我们把让小球运动和边界检测放到了一个函数里。这样很方便通过开关变量来调用。

第三步定义开关变量，并在动画循环中调用它，用来控制小球是自用运动还是跟随鼠标一起运动。当鼠标按下时isMousedown变为true，抬起是变为false。
 

现在让我们来看看动画效果

物体的抛扔在动画中怎样描述呢？它意味着你点击一个物体并且以一定的方向开始移动它，当你释放它时，物体沿着你拖拽的方向继续移动，是不是跟我们平时扔东西一模一样。

那么当小球扔出去后，它的运行速度怎么计算呢？你可以直接在水平方向重新给它设定一个速度(vx),甚至你也可以设置竖直方向的速度(vy),这样当你释放一个小球的时候，它就会按照你新设定的速度运动。但是,这有一个问题，那就是绝对的不真实。想想你平时扔一个东西，物体脱离你手后的运行速度是根据你在扔这个物体的时间段内，物体运动的距离决定的。换言之，也就是说你扔的越快，物体脱离你手后运动的速度就越快。

在canvas中，物体的位置变化由速度决定，即 oldPosition + velocity = newPosition。稍做变形，就可以得出velocity = newPosition - oldPosition，这样我们就得出了物体释放时的运行的速度。

这里有几个比较关键的点必须说明，什么时候算是oldPosition,什么时候算是newPosition。当你拖动一个物体，物体在每一帧都会有一个newPosition，而oldPosition就是物体在上一帧的位置。如果你使用requesstAnimationFrame()方法做动画循环，每一帧的时间间隔会不一样，不过基本上都是在十几毫秒左右，你的oldPosition就是十几毫秒前(也就是上一帧)的位置，newPosition就是十几毫秒后(下一帧)的位置。现在清楚了吧！

看看我们给的公式，不难发现，速度的大小取决于在一帧中运动的距离，也就是新位置与旧的位置之间的差值。这样就跟我们现实中完全一样了。

ok!现在来看看动画效果。

具体代码如下：
 

从动画中我们可以看出，当我们快速移动小球后，小球脱离鼠标后的运动速度很快。当我们缓慢移动的时候小球的移动速度很慢，由于我们定义的重力加速度比较大，你会看到小球快速的向下方坠落。在上方，我做了一个速度值得计算，来让效果更叫明显，可以直观的看到速度值得变化。

本章主要学习了用户与canvas中的物体的交互，物体的移动，拖拽和抛扔。核心代码如下：
 

js代码下载：  《html5 canvas动画》.zip