最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 Canvas弹跳小球小例子
时间：2022-06-25 18:14:42 编辑：袖梨 来源：一聚教程网
1，Canvas实现动画的原理
（1）首先设置一个定时器，反复调用绘图函数（一般每秒30~40次）。每次调用，都会重绘整个画布。完成后的效果就像动画一样，每一帧间过渡会平滑而流畅。
（2）有两种方法都可以实现重复绘制：setTimeout()和setInterval()。用哪个可以自行决定。
（3）setInterval() 能保证精确地按时重绘，当又可能因此牺牲性能（如果绘图代码执行时间比设定时间还要长，浏览器将很难跟上，随着绘图代码的连续执行，页面会出现短暂地停顿）
（4）本例使用 setTimeout()，其运行等待时间设为20毫秒（这个是典型的动画延迟时间）。
2，小球弹跳动画
（1）点击“添加小球”按钮，会在画布上添加一个小球。
（2）添加的小球会向右下做自由落体运动，碰到地板、墙壁后会反弹。同时每次反弹会受到阻力的影响，稍稍减少速度。
（3）鼠标点击任意小球，会让该小球突然加速，让它向某个方向弹开。
（4）点击“清空画布”按钮，会清除页面上的所有小球。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21