黑客帝国网页背景

最近看到一个黑客帝国的网页背景，特别喜欢。清理了下源码分享给大家，效果自己保存html看就行

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>...</title>
<style>
  body {
    background-color: black !important;
    overflow:hidden;
  }
  canvas{
      display:block;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  //making the canvas full screen
  c.height = window.innerHeight;
  c.width = window.innerWidth;

  //chinese characters - taken from the unicode charset
  var chinese = "ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍｽｦｲｸｺｿﾁﾄﾉﾌﾔﾖﾙﾚﾛﾝﾀﾇﾍ";
  //converting the string into an array of single characters
  chinese = chinese.split("");

  var font_size = 15;
  var columns = c.width / font_size; //number of columns for the rain
  //an array of drops - one per column
  var drops = [];
  //x below is the x coordinate
  //1 = y co-ordinate of the drop(same for every drop initially)
  for (var x = 0; x < columns; x++) drops[x] = 1;

  //drawing the characters
  function draw() {
     //Black BG for the canvas
     //translucent BG to show trail
     ctx.fillStyle = "rgba(0, 0, 0, 0.06)";
     ctx.fillRect(0, 0, c.width, c.height);

     ctx.fillStyle = "#1ec503"; //green text
     ctx.font = font_size + "px Arial";
     //looping over drops
     for (var i = 0; i < drops.length; i++) {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random() * chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i * font_size, drops[i] * font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if (drops[i] * font_size > c.height && Math.random() > 0.975)
           drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
     }
  }

  setInterval(draw, 63);
</script>
</body></html>

看完了？留个评分呗？

[2人评了分，平均: 3/5]