零基础学做网站教程

当前位置:

html5中canvas标签实现粒子炫酷背景特效

canvas是html5中比较重要的一个标签,canvas的实现需要借助原生态的js代码才能很好的展示出来。今天学做网站论坛就给大家讲一讲如何使用html5中canvas标签来实现粒子炫酷背景特效。

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

1

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

Tags:

, , ,

上一课: 下一课:

才1个评论

  1. 建站学员头像
    在线工具 说:

    项目是开源的,开源地址在这里:https://github.com/hustcc/canvas-nest.js

    希望博主可以加一下

发表评论

*

* 绝不会泄露