三分钟学会使用canvas-nest.js

canvas-nest是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷如果你也想你的网页拥有这个背景效果，可以看看这篇文章，让你轻松get这个背景效果1.安装1.可以使用命令直接引入npm i vue-canvas-nest2.可以在Github上直接下载插件Github：https://github.com/hustcc/canvas-nest.js2.Vue使用（按需引入到

xuegao.

3113人浏览 · 2022-02-26 12:46:25

xuegao. · 2022-02-26 12:46:25 发布

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属性有四个属性值可以设置，分别是color、opacity、zIndex、count

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^