当面向对象遇到Canvas

这里不会去 讲面向对象基础，canvas基础，因为太枯燥了。相信大家学过面向对象的都可能有一个疑问，就是这玩意儿有什么用。最多也是写一个类，然后去new，得到类的实例，去调用类的方法。当然我觉得这完全没发挥出面向对象的威力来，好了，老规矩，先上效果Demo。

微信不让我上传过大的gif，那就省了吧。直接上代码

那么小球类我们已经创建好了，接下来，我们开始写逻辑了。

逻辑分析

1、有N小球需要不停的运动。每个小球就是上面创建好的Ball类的实例，所以我们需要一个数组来装载这些小球。

2、每个小球并不是同时向上发射的，有一点时间间隔，我们一般用循环生成N个小球，但是这里我们换种方法，用定时器不断的创建小球，以达到小球不停的有时间间隔的发射。

3、因为小球在不停的创建，会一直向数组中push小球实例，时间运行过长，会导致数组过大，一直吃着内存，最终一导致页面卡死，因此我们需要一个移除小球的机制，那么这个判断条件就是：当小球出了屏幕，我们就去移除这个小球。（这一点很重要）

技术总结

ES6面向对象的基本使用。（当然用ES5function 完全可以实现，我比较喜欢用ES6）

根据需求我们要学会抽象出一个类，以及对应的成员属性和成员方法。

canvas基础API使用。绘制圆的时候，beginPath()不要忘了，canvas动画基础原理前面的文章中有总结过（画了擦，擦了画）

ES6的语法：解构赋值。箭头函数基本使用，大家一定要多用，才能熟能生巧。

我们要有基本的将需求转化为代码的能力。比如小球移出屏幕就要从数组中移除。防止数组过大吃内存。