黑客帝国网页背景

最近看到一个黑客帝国的网页背景,特别喜欢。清理了下源码分享给大家,效果自己保存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>

 

看完了?留个评分呗?
[1人评了分,平均: 5/5]

本站原创文章皆遵循“署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0)”。转载请保留以下标注:

原文来源:《黑客帝国网页背景》

发表评论

电子邮件地址不会被公开。

返回顶部