canvas动画合集Vue组件
vue-canvas-effect
canvas动画合集Vue组件<p align="center">
[? online demo](https://chenxuan0000.github.io/vue-canvas-effect/index.html)
</p>
内容
浏览器兼容安装使用ES6按需加载全部引入
普通模式
组件列表neonbubbles
修改日志贡献TKS
浏览器兼容
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.jsimport 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 标签<html>
<head>
...
</head>
<body>
<div id="app">
<neon-effect></neon-effect>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<script src="../dist/neon.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>组件列表
neon
name: neonEffect// 默认标签名 <neon-effect :options="options"></neon-effect>
//default options
{
len: 20, //五边形的单边长度
count: 50, //多少线重叠
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
name: bubblesEffect// 默认标签名 <bubbles-effect :options="options"></bubbles-effect>
//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
相关推荐
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04
softwear 2020-08-21