Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chenxuan0000/vue-canvas-effect
:tada: vue canvas动效库
https://github.com/chenxuan0000/vue-canvas-effect
canvas vue-components
Last synced: about 2 months ago
JSON representation
:tada: vue canvas动效库
- Host: GitHub
- URL: https://github.com/chenxuan0000/vue-canvas-effect
- Owner: chenxuan0000
- License: mit
- Created: 2018-01-27T09:44:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-01-28T11:36:35.000Z (over 6 years ago)
- Last Synced: 2024-03-30T20:21:55.500Z (2 months ago)
- Topics: canvas, vue-components
- Language: Vue
- Homepage:
- Size: 410 KB
- Stars: 122
- Watchers: 8
- Forks: 29
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (UI Components / Canvas)
- awesome-vue - vue-canvas-effect ★53 - A simple, canvas effect collection for Vue.js. (UI Components / Canvas)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (UI Components / Canvas)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (UI Components / Canvas)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (UI Components / Canvas)
- awesome-vue - vue-canvas-effect - A simple, canvas effect collection for Vue.js. (Components & Libraries / UI Components)
- awesome-stars - chenxuan0000/vue-canvas-effect - :tada: vue canvas动效库 (Vue)
README
# vue-canvas-effect
> A simple, canvas effect collection for Vue.js
[ ](https://www.npmjs.com/package/vue-canvas-effect) 
🌾 online demo |
📘 中文文档
## Contents
- [**`Browser support`**](#browser-support)
- [**`Installation`**](#installation)
- [**`Usage`**](#usage)
- [**`ES6`**](#es6)
- [**`On demand`**](#on-demand)
- [**`Fully import`**](#fully-import)
- [**`normal use`**](#normal-use)
- [**`Component List`**](#component-list)
- [**`neon`**](#neon)
- [**`bubbles`**](#bubbles)
- [**`Changelog`**](#changelog)
- [**`Contribution`**](#contribution)
- [**`TKS`**](#tks)
## Browser support
| [
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS | [
](http://godban.github.io/browsers-support-badges/)Android |
|:---------:|:---------:|:---------:|:---------:|:---------:|:---------:|
| IE9+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓
## Installation
### NPM
```bash
npm install vue-canvas-effect --save
```
## Usage
### ES6
#### On demand
> Recommend ways
> First, install babel-plugin-import
```javascript
npm install babel-plugin-import --save-dev
```
> Then edit .babelrc
```javascript
// .babelrc
{
"plugins": [["import", {
"libraryName": "vue-canvas-effect",
"libraryDirectory": "src/components"
}]]
}
```
> Next, if you need neon, edit main.js
```javascript
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
```javascript
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
...
new Vue({
el: '#app'
})
```
## Component List
### neon
- [neon-demo](https://chenxuan0000.github.io/vue-canvas-effect/index.html#/router_1)
> name: neonEffect
```html
// default tagName use
```
```javascript
//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](https://chenxuan0000.github.io/vue-canvas-effect/index.html#/router_2)
> name: bubblesEffect
```html
// default tagName use
```
```javascript
//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.
}
```
## Changelog
See the GitHub [release history](https://github.com/chenxuan0000/vue-canvas-effect/releases).
## Contribution
Welcome to give some Suggestions and optimizations, and look forward to your `Pull Request`.
## TkS
[circleMagic](https://github.com/FreAK19/circleMagic.js)
## License
vue-seamless-scroll is open source and released under the [MIT License](LICENSE).