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

83 阅读 0 评论 55 点赞

我是靠谱客的博主舒心信封，最近开发中收集的这篇文章主要介绍三分钟学会使用canvas-nest.js，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>