美文网首页
js canvas黑客帝国文字雨特效

js canvas黑客帝国文字雨特效

作者: IamaStupid | 来源:发表于2023-03-13 17:11 被阅读0次

    canvas黑客帝国文字雨特效

    <canvas id="myCanvas"></canvas>
        <!-- built files will be auto injected -->
        <script>
          var $cvs=document.getElementById("myCanvas");
          var ctx=$cvs.getContext("2d");
    
          let ww = 500;
          let hh = 400;
    
          $cvs.width = ww;
          $cvs.height = hh;
    
          let fontSize = 14;
          let columMax = Math.floor(ww / fontSize);
          ctx.font=`${fontSize}px Arial`;
          ctx.textBaseline = "top";
          let rowIndex = 0;
          let drop = []
    
          let tt;
    
          animateText()
    
          function animateText() {
            drawText()
            // window.requestAnimationFrame(() => {
            //   animateText()
            // })
            tt = setTimeout(() => {
              animateText()
            }, 100)
          }
    
          function drawText() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
            ctx.fillRect(0,0,$cvs.width,$cvs.height);
            ctx.fillStyle="#0F0";
            for(let i = 0; i < columMax; i++) {
              let text = getRandomText();
              if (drop[i] === undefined) {
                // 第一次初始化的时候,给文字的y坐标设一个随机数
                drop[i] = Math.floor(Math.random() * hh/4);
              } else if(drop[i] >= hh || (drop[i] >= (hh/4) && Math.random() > 0.9)) {
                // 文字的Y坐标超过了canvas的高度 或者
                // 随机数大于0.9,则重新个y坐标赋值
                drop[i] = 0;
              } else {
                drop[i] = drop[i] + fontSize;
              }
              ctx.fillText(text, i * fontSize, drop[i]);
            }
          }
          function getRandomText() {
            let randomStr = '0sd0ldpqwoe2xnvhb9zdka3dj4apwien7a58ubgur60adb';
            return randomStr[Math.floor(Math.random() * randomStr.length)]
          }
        </script>
    ```js

    相关文章

      网友评论

          本文标题:js canvas黑客帝国文字雨特效

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