超酷炫js动态线条网页背景效果 所有网站通用源码附WP插件

基于html5 canvas 绘制的网页背景效果

超酷炫js动态线条网页背景效果 所有网站通用源码附WP插件 模板插件 第1张

安装

# 使用 npm
npm install --save canvas-nest.js

# 或者使用 yarn
yarn add canvas-nest.js

特性

  • 不依赖 jQuery,使用原生的 javascript。
  • 非常小,只有 2 Kb。
  • 非常容易实现,配置简单,即使你不是 web 开发者,也能简单搞定。
  • 模块化 & 区域渲染。

使用

  • 快捷使用

将下面的代码插入到 <body> 和 </body> 之间.

<script type="text/javascript" src="dist/canvas-nest.js"></script>

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

<html>
<head>
	...
</head>
<body>
	...
	...
	<script type="text/javascript" src="dist/canvas-nest.js"></script>
</body>
</html>

然后就完成了,打开网页即可看到效果!请注意不要将代码置于 <head> </head>里面.

  • 模块化区域绘制(定制开发)

完成安装好,可以使用模块化方式 import。

并且只有一个 API,使用如下:

import CanvasNest from 'canvas-nest.js';

const config = {
  color: '255,0,0',
  count: 88,
};

// 在 element 地方使用 config 渲染效果
const cn = new CanvasNest(element, config);

// destroy
cn.destroy();

配置

  • 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

Example:

  • 快捷使用
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="dist/canvas-nest.js"></script>
  • 模块化区域绘制(定制开发)
{
  color: '0,0,255',
  opacity: 0.7,
  zIndex: -2,
  count: 99,
};

注意: 所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

文件下载

附件:canvas-nest.js

提示: 此处内容需 评论本文刷新本页 方可查看!

利熙博客资源下载

本站部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站内容若有侵犯了您的权益,请联系站长删除!

特别声明:本站的大部分资源多为来自网络,如有资源侵权你的合法利益请联系admin@liecnk.com删除!
利熙博客 » 超酷炫js动态线条网页背景效果 所有网站通用源码附WP插件

发表评论

有问题需要联系站长吗

立即联系 进交流群