vue-matrix-digit-rain

A Vue component of Matrix's digit raindrop effect
1,454 17
vue canvas matrix raindrop
Install
npm install vue-matrix-digit-rain
Latest Version:1.0.1
License:ISC
Last Updated:Dec 6, 2018
Links: GitHub  ·  npm
Maintainer: aaabdsfdfdsfdsfdsf

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

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

Related Packages

vue3-konva

Vue binding to canvas element via Konva framework

24,596 1,358
canvas vue konva
canvas-editor-engine

CanvasEditorEngine library, use: [typescript] [canvas]

6,710
canvas library typescript
sprite-creator

Sprite creator lib; use: [typescript] [canvas]

5,557
canvas library typescript
@johnnyguan/vue-captcha-code

vue captcha code

2,470 0
canvas vue captcha
canvas-color-disc

Color disc realized by canvas

1,269 0
canvas color disc

Version History

Version Released License
1.0.1 ISC
1.0.0 ISC