資訊專欄INFORMATION COLUMN
摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表
vue-canvas-effect
canvas動畫合集Vue組件
[? online demo](https://chenxuan0000.github.io/vue-canvas-effect/index.html)內容
瀏覽器兼容
安裝
使用
ES6
按需加載
全部引入
普通模式
組件列表
neon
bubbles
修改日志
貢獻
TKS
瀏覽器兼容ie9+
安裝 NPMnpm 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
neon-demo
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
bubbles-demo
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。
TKScircleMagic
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107291.html
摘要：動畫合集組件內容瀏覽器兼容安裝使用按需加載全部引入普通模式組件列表修改日志貢獻瀏覽器兼容安裝使用按需加載推薦首先安裝依賴然后修改文件然后，如果你需要組件，編輯全部引入不推薦普通模式標簽組件列表 vue-canvas-effect canvas動畫合集Vue組件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effe...
摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...
摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...
閱讀 1830·2021-11-18 13:21
閱讀 1962·2021-10-18 13:30
閱讀 1548·2021-10-12 10:13
閱讀 918·2021-10-09 09:43
閱讀 5430·2021-09-22 15:13
閱讀 3591·2021-08-11 10:22
閱讀 945·2019-08-30 13:46
閱讀 3525·2019-08-30 13:21
