怎么使用JavaScript?canvas實(shí)現(xiàn)字符雨效果

本文小編為大家詳細(xì)介紹“怎么使用JavaScript canvas實(shí)現(xiàn)字符雨效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么使用JavaScript canvas實(shí)現(xiàn)字符雨效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

字符雨效果

分析如何實(shí)現(xiàn)

• 字符雨從上往下逐漸消失： 這是canvas每次畫字符的時(shí)候就畫一遍黑色背景，但是這個(gè)背景是有透明度的，并且這個(gè)黑色背景的透明度還比較小，只有零點(diǎn)零八（經(jīng)過測試，0.08比較合適，也可以更改查看效果）；字符是從上往下落，上面的字符先出現(xiàn)，下面的字符后出現(xiàn)，程序重復(fù)地畫黑色背景，就算有透明度，疊加起來，上面的字符就會(huì)先被覆蓋，下面的后出現(xiàn)的字符還是還比較明顯，就形成了逐漸消失的效果。

• 只有其中一些列出現(xiàn)了字符： 如果不加以控制的話，那么canvas中每一列都會(huì)出現(xiàn)字符，不會(huì)出現(xiàn)參差不齊的效果。所以用一個(gè)代表出現(xiàn)機(jī)率的數(shù)來控制，當(dāng)字符落到canvas的底部，并且拿一個(gè)隨機(jī)數(shù)和出現(xiàn)機(jī)率進(jìn)行比較，如果隨機(jī)數(shù)大于其，那么這一列就可以從頂部再次出現(xiàn)字符，否則這一列在本次循環(huán)就不會(huì)出現(xiàn)字符，只有等待下次循環(huán)再次拿隨機(jī)數(shù)來比較。這樣就實(shí)現(xiàn)了有一些列出現(xiàn)字符，而另一些不出現(xiàn)字符的效果。

創(chuàng)建實(shí)例

let charRain = new CharRain("canvas_id");

HTML結(jié)構(gòu)

<canvas id="canvas"></canvas>

CSS代碼

body{
      margin: 0;
      padding: 0;
      overflow: hidden;
}
#canvas{
  background-color: #111;
}

JS源碼

;(function(win){

    /**
     * 創(chuàng)造字符雨
     */
    class CharRain
    {
      /**
       * @description CharRain 類的構(gòu)造函數(shù)
       * @constructs
       * @param {string} canvas_id - canvas 元素的 id
      */
      constructor(canvas_id){
        this.canvas = document.getElementById(canvas_id);
        this.context = this.canvas.getContext("2d");
        this.bg_alpha = 0.08;    // canvas背景的透明度，也是字符消失的速度；取值范圍：0 - 1
        this.appearRate = 0.95;  // canvas中每一列字符下落到底部后再次出現(xiàn)字符的機(jī)率；取值范圍：0 - 1
        this.dropSpeed = 30;     // 字符下落速度
        this.fontSize = 17;     // 字符大??；也確定了字符列的數(shù)目，列之間的間距
        this.colunm = 0;        // 畫布中的字符列的數(shù)目
        this.isColorful = false; // 是否呈現(xiàn)彩色字符雨，默認(rèn)為經(jīng)典黑底綠字
        this.drops = [];        // 記錄每一列的字符下落的 y 值
        this.timer = null;      // 定時(shí)器
        this.chars = "abcdefghijklmnopqrstuvwxyz0123456789";  // 可選字符
        this.init();
      }

      /**
       * @description 初始化類
       */
      init(){
        let _this = this;
        this.setAttr();
        win.addEventListener("resize", function (){ // 添加瀏覽器窗口變化監(jiān)聽，重新設(shè)置相關(guān)屬性
          _this.setAttr();
        });
        this.timer = setInterval(function (){       // 添加定時(shí)器，下落
          _this.draw();
        }, _this.dropSpeed);
      }

      /**
       * @description 設(shè)置類的一些屬性
      */
      setAttr(){
        this.canvas.width = win.innerWidth;
        this.canvas.height = win.innerHeight;                     // 重新設(shè)置 canvas 的寬度和高度
        this.colunm = Math.ceil(win.innerWidth / this.fontSize); // 重新設(shè)置列數(shù)
        for (let i=0; i<this.colunm; i++) {
          if(!this.drops[i]) {                                    // 已經(jīng)存在下落字符的列不用設(shè)置
            this.drops[i] = win.innerHeight;                      // 字符瀑布流直接開始下落
          }
        }
      }

      /**
       * @description 隨機(jī)一個(gè)顏色
       * @return {string} rgba 顏色值
      */
      randomColor(){
        let r = Math.floor(Math.random()*256);
        let g = Math.floor(Math.random()*256);
        let b = Math.floor(Math.random()*256);
        return "rgba("+r+","+g+","+b+", 1)";
      }

      /**
       * @description 在畫布上畫出下落的字符
      */
      draw(){
        this.context.fillStyle = "rgba(1,1,1," + this.bg_alpha + ")";    // 疊加畫黑色背景，通過不透明度，形成字符逐漸消失的效果
        this.context.fillRect(0, 0, win.innerWidth, win.innerHeight);    // 畫矩形以清除之前畫的字符
        this.context.font = this.fontSize + "px Consolas";               // 設(shè)置字符的大小、樣式
        if(this.isColorful) {
          this.context.fillStyle = this.randomColor();                   // 呈現(xiàn)彩色字符雨
        } else {
          this.context.fillStyle = "#00cc33";                             // 經(jīng)典黑底綠字
        }

        for(let i=0; i<this.colunm; i++) {                               // 在每一列上畫出字符
          let index = Math.floor(Math.random() * this.chars.length);    // 隨機(jī)一個(gè)字符
          let x = i * this.fontSize;
          let y = this.drops[i] * this.fontSize;                        // 字符在 y 軸方向上的距離
          this.context.fillText(this.chars[index], x, y);               // 畫字符
          if (y>=this.canvas.height && Math.random()>this.appearRate) { // 字符落到底部 && 有再次出現(xiàn)的機(jī)率
            this.drops[i] = 0;                                          // 0 代表每一列的字符位置回到頂部
          } else {
              this.drops[i]++;                                            // 字符逐漸下落，字符在 y 軸上的距離增加一
          }
        } 
      }
    }

    win.CharRain = CharRain;
  }(window));

讀到這里，這篇“怎么使用JavaScript canvas實(shí)現(xiàn)字符雨效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。