vue.js集合_Vue.js的简单画布效果集合-CSDN博客

本文介绍了如何在Vue.js项目中使用vue-canvas-effect库，包含霓虹(neon)和气泡(bubbles)两种画布效果。通过NPM安装后，可以采用ES6模块按需或全局导入。推荐使用babel-plugin-import优化引入。组件清单中详细列出了neon和bubbles组件的用法和名称。

摘要由CSDN通过智能技术生成

vue.js集合

Vue画布效果 (vue-canvas-effect)

A simple, canvas effect collection for Vue.js.

Vue.js的简单画布效果集合。

View demo 查看演示 Download Source 下载源

安装 (Installation)

NPM (NPM)

npm install vue-canvas-effect --save

用法 (Usage)

ES6 (ES6)

一经请求 (On demand)

Recommend ways First, install babel-plugin-import

推荐方式首先，安装babel-plugin-import

npm install babel-plugin-import --save-dev

Then edit .babelrc

然后编辑.babelrc

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "vue-canvas-effect",
    "libraryDirectory": "src/components"
  }]]
}

Next, if you need neon, edit main.js

接下来，如果您需要霓虹灯，请编辑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)
})

完全导入 (Fully import)

no recommend ways

没有推荐的方法

import Vue from 'vue'
import vueCanvas from 'vue-canvas-effect';
Vue.use(vueCanvas)
new Vue({
  el: '#app',
  render: h => h(App)
})

正常使用 (normal use)

script tag

脚本标签

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

组件清单 (Component List)

氖 (neon)

neon-demo
霓虹灯

name: neonEffect

名称：neonEffect

// default tagName use
<neon-effect :options="options"></neon-effect>

//default options
        {
          len: 20, //The unilateral length of the pentagon
          count: 50, //How many lines overlap
          rate: 20, //rate the smaller fast
          dieChance: 0.05, //The chance to redraw a single painting failure.
          sparkChance: 0.1, //[0,1] The larger the figure, the larger the pentagon.
          sparkDist: 10, //Flash point distance.
          sparkSize: 2,//Flash point size.
          contentLight: 60, // [0,100] Brightness of color block
          shadowToTimePropMult: 6, //The shadow size of the inner ring of the pentagon.
          bgColorArr: [0, 0, 0] //Background color array
        }

气泡 (bubbles)

bubbles-demo
气泡演示

name: bubblesEffect

名称：气泡效果

// default tagName use
<bubbles-effect :options="options"></bubbles-effect>

//default options
        {
          color: 'rgba(225,225,225,0.5)', //Bubble color
          radius: 15, //Bubble radius
          densety: 0.3, // The larger the bubble density, the greater the density (suggest no more than 1).
          clearOffset: 0.2 // The larger the bubble disappears [0-1], the longer it disappears.
        }