前端一个网页粒子背景插件 -Canvas-nest.js

安装
特性
使用
配置
相关项目
使用项目
License
参考：

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

安装

# 使用 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)，注意用,分割
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,
};

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

使用项目

A Tool: 一个好用的工具集合.

License

MIT@hustcc.

参考：

*原作者GitHub. *一个使用者的CSDN 博客.

前端 一个网页粒子背景插件 -Canvas-nest.js

安装

特性

使用

配置

相关项目

使用项目

License

参考：

相似文章

前端一个网页粒子背景插件 -Canvas-nest.js