qq上当有消息来的时候会在列表右边出现一个消息圆点，这个圆点可以拖拽，当拖拽到一定的时候，这个消息就爆炸了，这个效果看起来比较炫酷，今天我们就利用canvas做一个类似的效果，先看看最终效果:
主要思路
其实要实现这个效果，主要有三个比较重要的步骤，第一个就是实现拖拽的时候那种沾粘的效果，第二个就是放手后的弹动效果，第三个就是实现爆炸效果。
沾粘效果实现的时候其实是包括三个图形，就是两头的圆和中间连接的曲线，其中我们正在拖拽的圆大小是不变的，另一头的圆是会根据拖拽的距离变化的。这里我们需要规定出一个拖拽距离的大小和另一头圆大小的一个数学公式出来：
- var c_d = getDistance(c_x, c_y, _x, _y);//大圆和小圆的距离
- var small_r = c_r - Math.sqrt(c_d * 2);//c_r为大圆的半径，小圆半径＝大圆半径-Math.sqrt(d*2);
上面是demo中采用的关系，就是当拖拽的越远的时候，圆变小的更慢，这个关系不是固定的，你也可以根据你希望的变化速率去写这个关系。
沾粘效果的原理其实就是将大小圆连接起来的一个梯形，现在我们需要做的是计算出这个梯形的四个点坐标 ：
大小圆中间为梯形连接是最简单的情况，这里我们将对梯形瘦身，就是在中线附近的位置找到一个合适的点，到时候利用二次贝塞尔曲线去描绘即可。
我们只要求出上图中的k1和k2就可以利用quadraticCurveTo去绘制曲线了。当然，上图中的k1,k2是梯形中线的四等分点，实际操作中，你可以根据自己的需求看定在哪里合理，比如你可以让k1,k2为6等分点或者8等分点，但是这样的话，弧线看起来就没有那么弯曲了，或者你把k1,k2同时作为2等分点，那么弧线就很弯曲了。
上面已经将如何绘制沾粘图形的原理讲了，现在看看如何在松手的时候制作弹性收回。
上图描绘了在松手后，大圆的运动轨迹，它将沿着S1->S2->S3->S4->S5...运动，也就是每次跑到小圆的另一侧，但是距离只有之前的一半，当最后距离非常接近了，就停止运动。
爆炸效果呢最好是利用多张图片合成或者gif实现，因为那样可以更逼真的还原的爆炸效果，但是这里，我自己做了一个简单的爆炸效果。
当然，这个效果不是很逼真，但是缩小后也还勉勉强强可以用，这里就简单介绍一下这个爆炸效果咋做的。
这里的爆炸效果其实主要是五个图形拼凑起来的，中间的近似圆形和四周近似椭圆。
上图描述了进行圆形的绘制方法，主要是根据圆形划分成n分，然后得到每个角度，重现绘制个n个点，绘制的时候半径浮动，最后利用quadraticCurveTo优化连接，看起来更圆润。
比较麻烦的是绘制进椭圆，需要一些公式的计算才可以得到一个旋转的椭圆。
