<template>
  <div style="width:100%;height:100%;overflow:hidden;opacity:0.2;" ref="container">
    <div class="mask1">
      <div class="mask2">
        <canvas ref="canvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'TslMatrix',
  data () {
    return {
      drops: [],
      fontSize: 50,
      texts: '0123456789'.split('')
    }
  },
  mounted () {
    var canvas = this.$refs.canvas
    canvas.height = this.$refs.container.clientHeight
    canvas.width = this.$refs.container.clientWidth
    var columns = canvas.width / this.fontSize
    this.drops = []
    for (var x = 0; x < columns; x++) {
      this.drops[x] = 1
    }
    setInterval(this.draw, 99)
  },
  methods: {
    draw () {
      var ctx = this.$refs.canvas.getContext('2d')
      ctx.fillStyle = 'rgba(23, 76, 151, 0.2)'
      ctx.fillRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
      ctx.fillStyle = 'rgba(255,255,255,0.9)'
      ctx.font = this.fontSize + 'px arial'
      for (var i = 0; i < this.drops.length; i++) {
        var text = this.texts[Math.floor(Math.random() * this.texts.length)]
        ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize)

        if (this.drops[i] * this.fontSize > this.$refs.canvas.height || Math.random() > 0.95) {
          this.drops[i] = 0
        }
        this.drops[i]++
      }
    }
  }
}
</script>

<style scoped>
.mask1 {
  width:100%;
  height:100%;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

.mask2 {
  width:100%;
  height:100%;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 10%,
    transparent 100%
  );
}

</style>
