1.0.1 • Published 6 years ago

vue-matrix-digit-rain v1.0.1

Weekly downloads
10
License
ISC
Repository
github
Last release
6 years ago

vue-matrix-raindrop

A Vue component of Matrix's digit raindrop effect img

Installation

npm

  npm install vue-matrix-digit-rain --save

yarn

  yarn add vue-matrix-digit-rain

Usage

In your .vue file:

<template>
  <div id="app">
    <VueMatrixRaindrop></VueMatrixRaindrop>
  </div>
</template>

<script>
import VueMatrixRaindrop from 'vue-matrix-digit-rain'
export default {
  name: 'App',
  components:{
    VueMatrixRaindrop
  }
}
</script>

Props

NameTypeDefaultDescription
canvasWidthnumber800The width of canvas
canvasHeightnumber600The height of canvas
fontSizenumber20The font-size of digit rain letter
fontFamilystring'arial'The font-family of digit rain letter
textContentstring'abcdefghijklmnopqrstuvwxyz'The text of rain letter,which will choose the index of textContent randomly
textColorstring'#0F0'The format of color only supports '#' style, not rgb
backgroundColorstring'rgba(0,0,0,0.1)'The background-color of canvas, please note the 0.1 in rgba, this value decides the tail length of rain drop, the bigger of the value, the shorter of the tail
speednumber(int)2The speed of rain drop down,the bigger of the value, the slower of the speed