最新下载
热门教程
- 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）点击“清空画布”按钮，会清除页面上的所有小球。
相关文章
- 《侠客风云传》貔貅拳套获取方式 怎么获得吸蓝拳套 08-08
- 黑曜石《宣誓》采用非线性叙事：把选择权交给玩家！ 08-08
- 无限暖暖满电行动任务攻略-无限暖暖满电行动任务怎么做 08-08
- 无限暖暖植物在哪采集-无限暖暖植物采集地点汇总 08-08
- 魔兽世界法力陵墓如何去-魔兽世界法力陵墓进去方法攻略 08-08
- 无尽梦回荆棘之梦怎么样-无尽梦回荆棘之梦优势详解 08-08