canvas鍔ㄧ敾鍚堥泦Vue缁勪欢

Posted 2020-12-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas鍔ㄧ敾鍚堥泦Vue缁勪欢相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/padding' title='padding'>padding directory effect nts 璺濈 hub pad href 绛惧悕

vue-canvas-effect

canvas鍔ㄧ敾鍚堥泦Vue缁勪欢

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

</p>

鍐呭

娴忚鍣ㄥ吋瀹?/code>


瀹夎

浣跨敤


ES6

鎸夐渶鍔犺浇
鍏ㄩ儴寮曞叆


鏅€氭ā寮?/code>




缁勪欢鍒楄〃

neon
bubbles


淇敼鏃ュ織
璐＄尞
TKS


娴忚鍣ㄥ吋瀹?/h2>
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"
  }]]
}
鐒跺悗锛屽鏋滀綘闇€瑕乶eon缁勪欢锛岀紪杈憁ain.js
import Vue from 鈥榲ue鈥?import {neon} from 鈥榲ue-canvas-effect鈥?
Vue.component(neon.name, neon);
`or`
Vue.component(鈥榗ustomName鈥? neon);
new Vue({
  el: 鈥?app鈥?
  render: h => h(App)
})
鍏ㄩ儴寮曞叆
涓嶆帹鑽?/blockquote>
import Vue from 鈥榲ue鈥?import vueCanvas from 鈥榲ue-canvas-effect鈥?
Vue.use(vueCanvas)
new Vue({
  el: 鈥?app鈥?
  render: h => h(App)
})
鏅€氭ā寮?/h3>
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
neon-demo
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
bubbles-demo
name: bubblesEffect
// 榛樿鏍囩鍚?<bubbles-effect :options="options"></bubbles-effect>
//default options
        {
          color: 鈥榬gba(225,225,225,0.5)鈥? //姘旀场棰滆壊
          radius: 15, //姘旀场鍗婂緞
          densety: 0.3, // 姘旀场瀵嗗害 瓒婂ぇ瓒婂瘑闆?寤鸿涓嶈澶т簬1)
          clearOffset: 0.2 // 姘旀场娑堝け璺濈[0-1] 瓒婂ぇ瓒婃櫄娑堝け
        }
淇敼鏃ュ織
See the GitHub 鏌ョ湅鍘嗗彶鐗堟湰.
璐＄尞
娆㈣繋缁欏嚭涓€浜涙剰瑙佸拰浼樺寲锛屾湡寰呬綘鐨?Pull Request銆?/p>
TKS
circleMagic