美文网首页
js实现黑客帝国数字雨效果

js实现黑客帝国数字雨效果

作者: 蓝不蓝编程 | 来源:发表于2020-12-05 10:21 被阅读0次

    效果图

    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
          body {
            margin: 0;
            padding: 0;
          }
          canvas {
            width: 100%;
            height: 100%;
          }
        </style>
      </head>
      <body>
        <canvas style="background:#111"></canvas>
    
        <script>
          //获取画布对象
          var can = document.querySelector("canvas");
          //获取画布的上下文
          var ctx = can.getContext("2d");
          //设置canvas的宽度和高度
          can.width = window.innerWidth;
          can.height = window.innerHeight;
          //每个文字的字体大小
          var fontSize = 16;
          //计算列
          var colunms = Math.floor(window.innerWidth / fontSize);
          //记录每列文字的y轴坐标
          var arr = [];
          //给每一个文字初始化一个起始点的位置
          for (var i = 0; i < colunms; i++) {
            arr.push(0);
          }
          //运动的文字
          var str = "you are a silly";
          //绘画的函数
          function draw() {
            //布满全屏的黑色遮罩层
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
            //给字体设置样式
            ctx.font = "700 " + fontSize + "px  微软雅黑";
            //给字体添加颜色
            ctx.fillStyle = "#00cc33";
            //写入画布中
            for (var i = 0; i < colunms; i++) {
              var index = Math.floor(Math.random() * str.length);
              var x = i * fontSize;
              var y = arr[i] * fontSize;
              ctx.fillText(str[index], x, y);
              //如果文字的Y轴坐标大于画布的高度,1/100*colunms概率将该文字的Y轴坐标重置为0
              if (y >= can.height && Math.random() > 0.99) {
                arr[i] = 0;
              }
              //文字Y轴坐标+1
              arr[i]++;
            }
          }
          draw();
          setInterval(draw, 30);
        </script>
      </body>
    </html>
    
    
    
    

    相关文章

      网友评论

          本文标题:js实现黑客帝国数字雨效果

          本文链接:https://www.haomeiwen.com/subject/gemiwktx.html