canvas实现粒子炫酷背景特效

canvas是html5中比较重要的一个标签，canvas的实现需要借助原生态的js代码才能很好的展示出来。最近发现一个使用canvas实现的粒子炫酷背景特效，可以打开学建站网关于页面查看，实现这种效果我们只需要使用一个canvas-nest.min.js的文件就可以了，不需要再自己书写，具体实现步骤如下：

基础用法：
1、可以直接引用bootcss的CDN代码：

<script src=”//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js”></script>

2、把以上js代码放置到页面的body标签中，不要放在头部里面；
3、如果想修改粒子线条的颜色或其他参数可以直接在引用的js标签中使用以下格式：
color: 线条颜色, 默认: ‘0,0,0’ (R,G,B)
opacity: 线条透明度, 默认（0~1）: 0.5
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
例如:

<script color=”0,0,255″ opacity=”0.7″ zIndex=”-2″ src=”//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js”></script>

以上三个步骤就完成了基础的用法，下面我们还可以根据需求做些修改。因为这段js是针对canvas实现的特效，所以我们可以直接使用这个标签把特效应用到合适的位置。

另一种用法：使用canvas标签单独定义显示位置
1、同样放置以下代码到页面body标签中；

<canvas id=”cas”></canvas>
<script src=”//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js”></script>

2、通过定义id cas的样式进行样式控制和是否显示，例如：
#cas{position:fixed;top:0;left:0;z-index:-2;opacity:0.4}