ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

canvas动画合集Vue组件

2020-06-07 12:01:28  阅读:831  来源: 互联网

标签:canvas Vue neon effect vue import 合集


vue-canvas-effect

canvas动画合集Vue组件

<p align="center">

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

</p>

内容

浏览器兼容

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

circleMagic

本文转载于:猿2048https://www.mk2048.com/blog/blog_hckc00icbaa.html

标签:canvas,Vue,neon,effect,vue,import,合集
来源: https://www.cnblogs.com/10yearsmanong/p/13060058.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有