溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用canvas數(shù)字雨實(shí)現(xiàn)效果

發(fā)布時(shí)間：2022-02-28 16:04:33 來源：億速云 閱讀：148 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了怎么用canvas數(shù)字雨實(shí)現(xiàn)效果的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇怎么用canvas數(shù)字雨實(shí)現(xiàn)效果文章都會(huì)有所收獲，下面我們一起來看看吧。

代碼：

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

    <script>
      //獲取畫布對(duì)象
      var can = document.querySelector("canvas");
      //獲取畫布的上下文
      var ctx = can.getContext("2d");
      //設(shè)置canvas的寬度和高度
      can.width = window.innerWidth;
      can.height = window.innerHeight;
      //每個(gè)文字的字體大小
      var fontSize = 16;
      //計(jì)算列
      var colunms = Math.floor(window.innerWidth / fontSize);
      //記錄每列文字的y軸坐標(biāo)
      var arr = [];
      //給每一個(gè)文字初始化一個(gè)起始點(diǎn)的位置
      for (var i = 0; i < colunms; i++) {
        arr.push(0);
      }
      //運(yùn)動(dòng)的文字
      var str = "you are a silly";
      //繪畫的函數(shù)
      function draw() {
        //布滿全屏的黑色遮罩層
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        //給字體設(shè)置樣式
        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軸坐標(biāo)大于畫布的高度，1/100*colunms概率將該文字的Y軸坐標(biāo)重置為0
          if (y >= can.height && Math.random() > 0.99) {
            arr[i] = 0;
          }
    //文字Y軸坐標(biāo)+1
          arr[i]++;
        }
      }
      draw();
      setInterval(draw, 30);
    </script>
  </body>
</html>

關(guān)于“怎么用canvas數(shù)字雨實(shí)現(xiàn)效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“怎么用canvas數(shù)字雨實(shí)現(xiàn)效果”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手