canvas是html5中比较重要的一个标签，canvas的实现需要借助原生态的js特效代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中canvas标签来实现粒子炫酷背景特效。（如果你不了解HTML5，可以先学习一下html5从入门教程。）

效果可能本网页，鼠标在屏幕上会有多个几何线条的背景特效。 如果你在自己建网站过程中也想在自己的网站上显示这样的背景特效，就可以按照下面的方法操作。

实现这种效果我们只需要使用一个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}