网页背景字符流动效果的JS实现

参考代码：https://github.com/akiritsu/pRoJEct-NeGYa

<!-- background animations -->
<div class="div_bg">
  <canvas id="c"></canvas>
</div>
<script>
  var c = document.getElementById("c");
  var ctx = c.getContext("2d");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  var txts = "{{site.bgtext}}";
  txts = txts.split("");
  var font_size = 12;
  var columns = c.width / font_size;
  var drops = [];
  for (var x = 0; x < columns; x++) drops[x] = 1;
  function draw() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#490";
    ctx.font = font_size + "px arial";
    for (var i = 0; i < drops.length; i++) {
      var text = txts[Math.floor(Math.random() * txts.length)];
      ctx.fillText(text, i * font_size, drops[i] * font_size);
      if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
      drops[i]++;
    }
  }
  setInterval(draw, 20);
</script>

• 横坐标从左往右，纵坐标从上到下遍历填充字符，纵坐标在超出画面和随机情况下清零。
• 这个应该也是利用视觉假象，hhh