vue-canvas-effect
canvas动画集合Vue组件
[？ online demo (https://chenxu an 0000.github.io/vue-canvas-effect/index.html ) )
内容
浏览器兼容性
ie9
安装
NPM
npminstallvue-canvas-effect-- save
使用
ES6
按需加载
推荐
首先安装babel-plugin-import依赖关系
npminstallbabel-plugin-import-- save-dev
修改. babelrc文件
//.babelrc
{
' plugins': [['import '，{
'库名称' : ' vue-canvas-effect '，
'库目录' : ' src/components '
() ]
}
然后，如果需要neon组件，请编辑main.js
导入来自' vue from ' vue '
import { neon } from ' vue-canvas-effect '；
VUE.component(Neon.name，neon )；
`或`
VUE.component('customname '，neon )；
newvue({
El : ' # APP '，
render:h=h(app )
() )
全部导入
不推荐
导入来自' vue from ' vue '
importvuecanvasfrom ' vue-canvas-effect '；
vue.use(vuecanvas ) )。
newvue({
El : ' # APP '，
render:h=h(app )
() )
正常模式
脚本标签
.
newvue({
El : ' # APP '
() )
组件列表
离子
name: neonEffect
//默认标签名称
//default选项
{
len: 20，//五边形的单边长度
count: 50，//有多少条线重叠
rate: 20，//速度越小越快
dieChance: 0.05，//一次重画失败重画的概率
sparkChance: 0.1，//[ 0，1 ]越大，绘制的五边形越多
sparkDist: 10，//闪烁点的距离
sparkSize: 2，//闪烁点的大小
内容灯光： 60，//[ 0，100 ]色块的亮度
shadowToTimePropMult: 6、//五边形内圈阴影的大小
bgcolor arr : [ 0，0，0 ]//背景色数组
}
bubbles
name :总线效率
//默认标签名称
//default选项
{
color:'rgba(225、225、225、0.5 )、//气泡颜色
radius: 15，//气泡半径
densety: 0.3，//气泡密度越大越密(建议不要大于1 ) ) ) ) ) ) ) ) ) )。
clearOffset: 0.2 //气泡消失距离[0-1]越大消失得越慢
}
更改日志
See the GitHub看历史版本。
做出贡献
欢迎您的意见和优化。 等待您的拉动请求。
TKS