vue 引入canvas_canvas动画合集Vue组件
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
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。
TKS
vue 引入canvas_canvas动画合集Vue组件相关推荐
- VUE正则表达式验证规则合集
VUE正则表达式验证规则合集 0-100校验 发动机号校验 拼音校验 经度校验 纬度校验 VIN码校验 车牌校验 时间校验 票价校验 身份证校验 年龄校验 0-10校验 驾驶证档案编号校验 手机号码校 ...
- swift 动画合集
本例参照objective-c的动画合集进行swift的转换,objective-c地址参照地址 https://github.com/yixiangboy/IOSAnimationDemo 1 ...
- 20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载
20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载 包含内容: – 15个快速标题 – 15个迷你小标题 – 30金色标题 – 30个标注介 ...
- 一款炫酷的相册动画合集【源码分享】
这是一款炫酷的相册动画合集,集合了粒子.雪花.气泡.蝴蝶心形路径.星星.相册翻页等效果,有需要的可以点击下方名称链接下载. 效果图 炫酷的相册动画合集 整理不易,欢迎大家交流学习.
- Android 之 动画合集之属性动画 -- 又见
本节引言: 上节我们对Android的属性动画进行了初步的学习,相信大家对于属性动画已经不再是 一知半解的状态了,本节我们继续来探究Android属性动画的一些更高级的用法! 1.Evaluator自 ...
- 13 个优秀的 Vue 开源项目及合集推荐
关注不迷路 Vue 结合了 React 和 Angular 的优点,并且有着团结.活跃且庞大的社区,可以帮助解决开发中遇到的问题.开源社区不断提出解决问题的新方法.工具和库的数量也贡献量不断的增加. ...
- 【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
前言 一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是 createAnimation . this.animate 和 CSS3动画 . 1. cr ...
- vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
- vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
最新文章
- [优先队列] 洛谷 P2085 最小函数值
- UVA10296 Jogging Trails（中国邮递员问题）（欧拉回路、一般图最大权匹配 / 状压DP）
- Percona XtraDB Cluster(转)
- Convert AS400 Spool to PFD Tools – PDFing
- BZOJ-1013-球形空间产生器sphere
- 莓良心（第二类斯特林数）
- 将Java Flight Recorder与OpenJDK 11结合使用
- python判断语种_编写简单的Python程序来判断文本的语种
- 阿里发力线下渠道，腾讯京东该如何打破其流量优势？
- Windows 怎么了？微软又停止一大版本更新
- 前端获取小程序二维码参数_微信小程序实现带参分享并消息卡片获取参数
- 战地一的服务器在哪个文件夹,战地1怎么加入服务器 战地1加入服务器方法
- 关于垂直列行值转成水平行值及多列值转合并成单列值
- Java基本数据类型之char
- 从零开始搭建一个群管机器人
- Python Pymysql实现数据存储
- android apk下载完成后调用安装
- SQL根据出生日期计算年龄的两种算法
- Pandas str列内置方法
- HTML 5 技术——链接群（持续更新）