使用canvas实现黑客帝国数字雨效果

使用canvas实现黑客帝国数字雨

效果图：

代码：

!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>
    

总结

以上所述是小编给大家介绍的使用canvas实现黑客帝国数字雨效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！