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

爱吃果蔬的猫

已于 2024-01-22 09:52:52 修改

阅读量502

点赞数 11

文章标签： javascript ecmascript 前端

于 2024-01-22 09:52:04 首次发布

本文链接：https://blog.csdn.net/qq_53895518/article/details/135740855

版权

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

1.安装

可以使用命令直接引入

npm i vue-canvas-nest

可以在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>

👉原文链接

爱吃果蔬的猫

关注

11
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
三分钟学会使用canvas-nest.js

canvas-nest是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷。如果你也想你的网页拥有这个背景效果，可以看看这篇文章，让你轻松get这个背景效果。（按需引入到页面并注册组件，若所有页面都需要，可直接在App.vue页面引用）(直接在HTML页面上引入canvas-nest.js即可)说明：注意el绑定的是最外层父级的id。2.可以在Github上直接下载插件。1.可以使用命令直接引入。
复制链接

扫一扫