canvas-nest是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷
如果你也想你的网页拥有这个背景效果，可以看看这篇文章，让你轻松get这个背景效果
1.安装
可以使用命令直接引入
npm i vue-canvas-nest可以在Github上直接下载插件
Github：https://github.com/hustcc/canvas-nest.js2.Vue使用
（按需引入到页面并注册组件，若所有页面都需要，可直接在App.vue页面引用）
（1）Vue页面script标签内：
<script>
import vueCanvasNest from "vue-canvas-nest";
export default {
? data() {
? ? return {
? ? ? ? //配置属性
? ? ? ? config: {
? ? ? ? ? ? color: "255, 255, 255",
? ? ? ? ? ? opacity: 1,
? ? ? ? ? ? zIndex: 5,
? ? ? ? ? ? count: 99,
? ? ? },//配置炫酷效果
? ?}
? },
?components: {
? ? vueCanvasNest
? },
?methods: {}
}
</script>（2）Vue页面template内：
<template>
? ?<div id="elecData_father">
? ? ?<vue-canvas-nest :config="config" :el="'#elecData_father'"></vue-canvas-nest> ? ?
? ?</div>
</template>说明：注意el绑定的是最外层父级的id ? ? ? ??
3.html使用
(直接在HTML页面上引入canvas-nest.js即可)
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title>CanvasDemo</title>
</head>
<body>
<div id="cas" style="position: absolute;width: 200px;height: 200px; left: 200px; z-index: 99999;"></div>
<script src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js" type="text/javascript" color="255,0,0" opacity="0.5" count="200" ></script>
</body>
</html>?👉原文链接