GitHub地址
GitHub地址：https://github.com/hustcc/canvas-nest.js
使用方法
1. 普通html网页
在body标签的最后面直接引入js文件即可
<html>
<head>
...
</head>
<body>
...
...
<script src="dist/canvas-nest.js"></script>
</body>
</html>
2. vue项目中
在vue中稍微麻烦一点，需要以模块形式导入
首先安装模块
npm install --save canvas-nest.js
然后在script中引入
import CanvasNest from 'canvas-nest.js'
然后最重要的一步：在created方法中调用，不然会找不到元素
created() {
this.$nextTick(() => {
let element = document.getElementById('app');
let config = {
color: '6,135,249',
count: 40,
zIndex: 1
}
new CanvasNest(element, config);
});
},
至此 页面中就能显示出效果了
3. 配置说明
color: 线条颜色, 默认: ‘0,0,0’。(注意使用 ‘,’ 进行分隔)
pointColor: 线条颜色, 默认: ‘0,0,0’。(注意使用 ‘,’ 进行分隔)
opacity: 点的的不透明度，默认值：0.5。范围0-1
count: 点的数量, 默认: 99。
zIndex: 背景的 z-index 属性，默认值：-1。z-index值高的将会把z-index值低的元素 “遮住”