html5 canvas创建弹性碰撞动画

 

     文章有点长但是对于想学习html5 canvas的人来说看完这篇文章是非常值得的。

           在线演示地址：为了让百度快些收录，地址放在评论1楼 

    在这边我们将用到物理学上的速度，加速度，物理边界，碰撞定理，弹性碰撞（非弹性碰撞），动量守恒。

      看到这么多是不是很有压力，下面就一一介绍并且最终结果我们将用这些技术制作一个简单的类似行星碰撞的画面（学了这些可以发挥自己的想象创作更有趣的东西比如台球游戏等等）。

     1.形状的模拟：

            各个物体形状我们用小球来实现定义为Shape类并具有属性原点（x,y）和小球的半径radius;

  var Shape = function(x,y,radius)

          {

                   this.x=x;

                   this.y=y;

                   this.radius=radius;

            }

 

    2.速度的模拟：

            物理上的速度包括速率和方向，所以1中的Shape属性不够用我们要新增两个属性x轴和y轴方向速率（vX，vY）,为了方便将Shape类命名为Asteroid类此时具有5个属性。          

   var Asteroid = function(x,y,radius,)

        {

               this.x=x;