zoukankan      html  css  js  c++  java
  • 炫酷科技感黑客感瀑布流html代码

    效果如下

    代码如下

    <!DOCTYPE html><html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>炫酷科技感黑客感瀑布流html代码</title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
          body {
            background: black;
          }
          canvas {
            display: block;
          }
        </style>
      </head>
      <body>
        <canvas id="waterfall"></canvas>
        <script>
          var waterfall = document.getElementById("waterfall");
          var ctx = waterfall.getContext("2d");
          waterfall.height = window.innerHeight;
          waterfall.width = window.innerWidth;
          var chinese = "瀑布流瀑布流瀑布流";
          chinese = chinese.split("");
          var font_size = 10;
          var columns = waterfall.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, waterfall.width, waterfall.height);
            ctx.fillStyle = "#0F0";
            ctx.font = font_size + "px arial";
            for (var i = 0; i < drops.length; i++) {
              var text = chinese[Math.floor(Math.random() * chinese.length)];
              ctx.fillText(text, i * font_size, drops[i] * font_size);
              if (drops[i] * font_size > waterfall.height && Math.random() > 0.975)
                drops[i] = 0;
              drops[i]++;
            }
          }
          setInterval(draw, 50);
        </script>
      </body>
    </html>
    
  • 相关阅读:
    Models(Pascal)
    Summer Plan(挖坑待填)
    C++之指针
    QuickPower快速幂
    codevs 1231最优布线问题
    颓废了1年+,今天开始勤(tui)奋(fei)啦
    l'Hopital法则
    相律
    小意外
    一种改进的动力学处理方法
  • 原文地址:https://www.cnblogs.com/sugartang/p/14977909.html
Copyright © 2011-2022 走看看