1、CSS动画，由浏览器渲染，可控性最差，速度非常快（如果浏览器打开了硬件加速）
2、Canvas 2D动画，使用JS支持，所以速度稍慢
3、Canvas WebGL动画，使用JS支持，但使用OpenGL渲染，速度和第一个不相上下（其实应该会更快），但相当复杂。
至于直接控制DOM元素还是省省吧，太慢了。。。
我们发现很多动效都和canvas有关，我们可以绘制一块canvas作为背景，可以和canvas动画相联系，下面我们就绘制一块移动的小圆点动效图。
在HTML上canvas只需要一句话来展示，因此canvas的动画效果主要通过js来实现。在HTML上：
为了使canvas和页面上其他组件一同显示，且不影响页面其他组件展示，我们将canvas的position设置成fixed:
1、在js中，先获取画布： var canvas = document .getElementById( 'myCanvas' )
2、渲染上下文：元素创造了一个固定大小的画布，它公开了一个或多个 渲染上下文 ，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中： var ctx = canvas .getContext( '2d' )我们可以根据这个ctx来判断浏览器是否支持canvas。
3、初始化数据，设置canvas的大小：我们将宽高设置成页面的宽高：
4、为了使小圆点不那么单调，我们设置了彩色效果，定义了一些函数来设置颜色：
5、我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个原型对象。可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象通过这个属性，让实例对象也能够访问原型对象上的方法，绘制方法挂载到点对象上：
6、圆点生成以及移动：
7、最后将动画效果设置上去：
如果使用这样的canvas作为背景，会看起来更加生动，效果更好。
