最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 Canvas弹跳小球小例子
时间：2016-02-25 编辑：简简单单 来源：一聚教程网
1，Canvas实现动画的原理
（1）首先设置一个定时器，反复调用绘图函数（一般每秒30~40次）。每次调用，都会重绘整个画布。完成后的效果就像动画一样，每一帧间过渡会平滑而流畅。
（2）有两种方法都可以实现重复绘制：setTimeout()和setInterval()。用哪个可以自行决定。
（3）setInterval() 能保证精确地按时重绘，当又可能因此牺牲性能（如果绘图代码执行时间比设定时间还要长，浏览器将很难跟上，随着绘图代码的连续执行，页面会出现短暂地停顿）
（4）本例使用 setTimeout()，其运行等待时间设为20毫秒（这个是典型的动画延迟时间）。
2，小球弹跳动画
（1）点击“添加小球”按钮，会在画布上添加一个小球。
（2）添加的小球会向右下做自由落体运动，碰到地板、墙壁后会反弹。同时每次反弹会受到阻力的影响，稍稍减少速度。
（3）鼠标点击任意小球，会让该小球突然加速，让它向某个方向弹开。
（4）点击“清空画布”按钮，会清除页面上的所有小球。
相关文章
- html5 canvas 详细使用教程 02-10
- html5中canvas 圆周运动和椭圆运动例子 08-21
- html5中canvas脉冲运动示例 08-21
- html5中canvas正弦波运动示例详解 08-21
- HTML5 Canvas画图板的例子 06-28
- HTML5 - Canvas动画效果的例子 02-25