canvas-nest是一个基于canvas绘制的网页背景效果的插件,使用简单,但效果贼酷
如果你也想你的网页拥有这个背景效果,可以看看这篇文章,让你轻松get这个背景效果

在这里插入图片描述
1.安装

1.可以使用命令直接引入
npm i vue-canvas-nest
2.可以在Github上直接下载插件
Github:https://github.com/hustcc/canvas-nest.js

2.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>

4.canvas-nest属性

绑定的config属性有四个属性值可以设置,分别是coloropacityzIndexcount

color的值为RGB的取值
opacity是鼠标与各个点之间连线的透明值
zIndex是特效显示的优先层级
count是背景中漂浮点的数量

Logo

前往低代码交流专区

更多推荐