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