vue 引入canvas_canvas动画合集Vue组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_42320493/article/details/112805690

这篇博客介绍了如何在Vue项目中引入和使用vue-canvas-effect库，提供了neon和bubbles两种canvas动画组件的详细说明，包括安装、使用方法及默认配置选项。同时还提到了浏览器兼容性和贡献方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-canvas-effect

canvas动画合集Vue组件

[? online demo](https://chenxuan0000.github.io/vue-canvas-effect/index.html)

内容

浏览器兼容

ie9+

安装

NPM

npm install vue-canvas-effect --save

使用

ES6

按需加载

推荐

首先安装babel-plugin-import依赖

npm install babel-plugin-import --save-dev

然后修改 .babelrc文件

// .babelrc

{

"plugins": [["import", {

"libraryName": "vue-canvas-effect",

"libraryDirectory": "src/components"

}]]

}

然后，如果你需要neon组件，编辑main.js

import Vue from 'vue'

import {neon} from 'vue-canvas-effect';

Vue.component(neon.name, neon);

`or`

Vue.component('customName', neon);

new Vue({

el: '#app',

render: h => h(App)

})

全部引入

不推荐

import Vue from 'vue'

import vueCanvas from 'vue-canvas-effect';

Vue.use(vueCanvas)

new Vue({

el: '#app',

render: h => h(App)

})

普通模式

script 标签

...

new Vue({

el: '#app'

})

组件列表

neon

// 默认标签名

//default options

{

len: 20, //五边形的单边长度

rate: 20, //速度越小越快

dieChance: 0.05, //单次绘画失败进行重绘的几率

sparkChance: 0.1, //[0,1] 越大画出的五边形越多重

sparkDist: 10, //闪烁点的距离

sparkSize: 2,//闪烁点的大小

contentLight: 60, // [0,100] 色块的亮度

shadowToTimePropMult: 6, //五边形的内环阴影大小

bgColorArr: [0, 0, 0] //背景色数组

}

bubbles

// 默认标签名

//default options

{

color: 'rgba(225,225,225,0.5)', //气泡颜色

radius: 15, //气泡半径

densety: 0.3, // 气泡密度越大越密集(建议不要大于1)

clearOffset: 0.2 // 气泡消失距离[0-1] 越大越晚消失

}

修改日志

See the GitHub 查看历史版本.

贡献

欢迎给出一些意见和优化，期待你的 Pull Request。

TKS