HTML5 Canvas弹跳小球小例子

1，Canvas实现动画的原理

（1）首先设置一个定时器，反复调用绘图函数（一般每秒30~40次）。每次调用，都会重绘整个画布。完成后的效果就像动画一样，每一帧间过渡会平滑而流畅。
（2）有两种方法都可以实现重复绘制：setTimeout()和setInterval()。用哪个可以自行决定。
（3）setInterval() 能保证精确地按时重绘，当又可能因此牺牲性能（如果绘图代码执行时间比设定时间还要长，浏览器将很难跟上，随着绘图代码的连续执行，页面会出现短暂地停顿）
（4）本例使用 setTimeout()，其运行等待时间设为20毫秒（这个是典型的动画延迟时间）。

2，小球弹跳动画

（1）点击“添加小球”按钮，会在画布上添加一个小球。
（2）添加的小球会向右下做自由落体运动，碰到地板、墙壁后会反弹。同时每次反弹会受到阻力的影响，稍稍减少速度。
（3）鼠标点击任意小球，会让该小球突然加速，让它向某个方向弹开。
（4）点击“清空画布”按钮，会清除页面上的所有小球。