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|