在vue项目里用canvas实现数码流

其实是本篇码流效果是为了放在桌面，但是太炫酷了，会影响正常使用。所以分享给大家，希望大家喜欢。

1.创建一个vue项目（省略）

2.在vue2里mounted和onounted里使用以下代码

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    var texts = '156dsfcac'.split('');

    var fontSize = 16;
    var columns = canvas.width / fontSize;
    // 用于计算输出文字时坐标，所以长度即为列数
    var drops = [];
    //初始值
    for (var x = 0; x < columns; x++) {
      drops[x] = 1;
    }

    function draw() {
      //让背景逐渐由透明到不透明
      ctx.fillStyle = 'rgba(0, 0, 0, 0.00)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      //文字颜色
      ctx.fillStyle = '#0F0';
      ctx.font = fontSize + 'px arial';
      //逐行输出文字
      for (var i = 0; i < drops.length; i++) {
          var text = texts[Math.floor(Math.random() * texts.length)];
          ctx.fillText(text, i * fontSize, drops[i] * fontSize);

          if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
              drops[i] = 0;
          }

          drops[i]++;
      }
    }
    setInterval(draw, 33);

3.html部分

<canvas id="canvas" style="height: 100vh;width: 100vw"></canvas>