首页 javascript canvas实现粒子炫酷背...

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}