vue-canvas-effect

canvas动画合集Vue组件

? | ?

内容

• [浏览器兼容]
• [安装]
• [使用]
  • [ES6]
    • [按需加载]
    • [全部引入]
  • [普通模式]
• [组件列表]
  • [neon]
  • [bubbles]
• [修改日志]
• [贡献]
• [TKS]

浏览器兼容

安装

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 标签

  ...   
    
        
        
    
         复制代码

组件列表

neon

name: neonEffect

// 默认标签名
    复制代码

//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

// 默认标签名
    复制代码

//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。

实现的方式还是相对简单的有兴趣的朋友可以一起来完善下这个项目 让canvas动画在vue里面用起来更加快捷。

项目地址

TKS