提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

给网页添加一个基于canvas绘制的背景效果

2023-04-18 14:54:13 时间

一个非常不错的网页背景效果，跟随鼠标变幻的动态线条，一个基于canvas绘制的网页背景效果。

效果

具体请看本站背景

特点

1. 不依赖任何框架或者内库，如不依赖jQuery;

2. 使用原生的 javascript，只有1.6kb，如果开启 gzip，可以更小;

3. 使用外链非常容易实现，配置简单，即使你不是web开发者，也能简单搞定;

4. 模块化 & 区域渲染。

配置

color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割

pointColor: 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割

opacity: 线条透明度（0~1）, 默认: 0.5

count: 线条的总数量, 默认: 150

zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

例如： <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="canvas-nest.js"></script>

下载

点击下载

使用

将下面的代码插入到主题的footer.php的</body>前

<script type="text/javascript" src="你存放的路径"></script>

强烈建议在 </body>标签上方. 例如下面的代码结构:

<html>
<head>
    ...
</head>
<body>
    ...
    ...
    <script type="text/javascript" src="你存放的路径"></script>
</body>
</html>

然后就完成了，清理缓存打开网页即可看到效果

版权属于：Xcnte' s Blog（除特别注明外） 本文链接：https://www.xcnte.com/archives/468/ 本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！

相关文章