vue-matrix-digit-rain

vue-matrix-raindrop

A Vue component of Matrix's digit raindrop effect

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

Name	Type	Default	Description
canvasWidth	number	800	The width of canvas
canvasHeight	number	600	The height of canvas
fontSize	number	20	The font-size of digit rain letter
fontFamily	string	'arial'	The font-family of digit rain letter
textContent	string	'abcdefghijklmnopqrstuvwxyz'	The text of rain letter,which will choose the index of textContent randomly
textColor	string	'#0F0'	The format of color only supports '#' style, not rgb
backgroundColor	string	'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
speed	number(int)	2	The speed of rain drop down,the bigger of the value, the slower of the speed