【基础知识】HTML5 Canvas 动画项目-100个弹射小球(带控制器)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

实现100个随机弹射的小球在Canvas中碰撞，另外用一个玻璃窗格作为控制台，控制动画的开始与暂停。

演示链接

https://827652549.github.io/Canvas/Unit1/BouncingBalls.html

实现效果

思路

1. 将玻璃窗格控制器潜入Canvas中

2. 生成100个不同属性的小球

3. 通过短间隔的计时器不断的擦除并绘制新的Canvas图层

 

注意：在Canvas标签中使用HTML元素是不行的，因为只有在Canvas不被支持时，标签内的元素才被显示（一般都是

>Canvas not supported），所以只能让其他元素看起来像是Canvas范围内。

代码实现

    

    

    





    
弹射小球

    
一百个小球弹射

    Start



    Canvas not supported