canvas圆点动效图

我们发现很多动效都和canvas有关，我们可以绘制一块canvas作为背景，可以和canvas动画相联系，下面我们就绘制一块移动的小圆点动效图。

效果图

在HTML上canvas只需要一句话来展示，因此canvas的动画效果主要通过js来实现。在HTML上：

html

为了使canvas和页面上其他组件一同显示，且不影响页面其他组件展示，我们将canvas的position设置成fixed:

css

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作为背景，会看起来更加生动，效果更好。