canvas實現漂亮的下雨效果

時間 2019-11-10

標籤 canvas 實現漂亮下雨效果简体版

原文原文鏈接

說明

這篇文章說如何用canvas畫出漂亮的下雨效果，先看看最後實現的效果吧。
效果圖
html

解釋

看圖來分析下，咱們須要實現哪些效果。
一、雨滴下落效果，移動鼠標控制下落方向
二、雨滴下落散成小水珠，小水珠的移動方向和鼠標移動方向相同
三、雨滴下落到鼠標座標必定範圍內，散成小水珠，一樣的，小水珠的移動方向也和鼠標移動方向相同前端

好的，咱們把整個效果大體拆分紅三個效果，實現這三個效果，就完成了。
咱們一步一步來實現。git

一、雨滴下落效果，移動鼠標控制下落方向

實現整個效果的思路就是，
初始時
用一個數組保存雨滴對象。
一個雨滴對象裏面有各個屬性用來表示，雨滴的x座標，y座標，長度，下落速度，顏色，判斷是否刪除的標誌位
更新動畫時
往數組中添加必定數量的雨滴對象，而後遍歷數組，修改每一個雨滴對象的x座標和y座標，用canvas根據雨滴對象的座標，畫出兩個點，連起來就是一個雨滴了。github

因此實現效果的重點就在座標上
初始化一個雨滴的時候
雨滴x座標：一個隨機數
雨滴y座標：-100，這樣是爲了讓雨滴從可視區域外進來
更新動畫時
雨滴x座標：原x座標的值 + speed * speedx
speed 是一個固定的值，表示雨滴下落速度，
speedx 是一個和鼠標移動方向有關係的變量，
speedx = speedx + (maxspeedx - speedx) / 50canvas

而maxspeedx 是根據鼠標移動方向獲得的一個值
maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2)，
e.clientX：鼠標距離可視區域左邊的值
canvasEl.clientWidth：整個可視區域的寬度
也就是說 speedx 是一個逐漸接近maxspeedx 的值
maxspeedx 的取值範圍是 -1 到 1，他的值越接近 -1，說明方向越向左，值越接近1，說明方向越向右。
爲何不直接用maxspeedx ？
這是爲了讓雨滴變化方向的速度不要那麼快，不要跟隨鼠標變化方向當即改變，要有點點的延遲，看上去更好些。
若是用maxspeedx ，是這樣的效果
數組

若是用speedx ，是這樣的效果
瀏覽器

雨滴y座標：原y座標的值 + speed
speed 和上面x座標中提到的同樣，是一個固定值，表示雨滴下落速度，dom

好的，最後就是用canvas根據雨滴對象的座標，畫兩個點了，而後連起來，雨滴就畫出來了
第一個點座標比較簡單，直接獲取雨滴對象的x座標和y座標，就是這個點的座標
第二個點的座標：
x座標 = 雨滴x座標的值 + 雨滴長度 * speedx
y座標 = 雨滴y座標的值 + 雨滴長度
最後把這兩個點連起來，就有一條線了，就是一個雨滴了函數

當設置x座標時，又用上了變量 speedx，這是爲了讓雨滴方向和雨滴下落方向相同，
當不用 speedx時，是這樣
動畫

當用上speedx時，是這樣

二、雨滴下落散成小水珠，小水珠的移動方向和鼠標移動方向相同

這裏的思路其實，和上面的效果有些類似
初始時
用一個數組保存小水珠對象。
一個小水珠，其實就是畫一個圓弧。
一個小水珠對象裏面有各個屬性用來表示，小水珠的座標，x軸移動速度，y軸移動速度，圓的半徑，判斷是否刪除的標誌位。
更新動畫時
往數組中添加必定數量的小水珠對象，而後遍歷數組，修改每一個小水珠對象的x座標和y座標，用canvas根據小水珠對象的座標屬性和半徑屬性，畫一個圓弧。

因此實現效果的重點還在座標上
初始化一個小水珠的時候
小水珠是雨滴消失的時候出現的，因此小水珠的座標也是根據雨滴的座標來的，刪除一個雨滴，就出現一些小水珠，並且小水珠的移動方向也是和雨滴下落方向，鼠標移動方向同樣，因此仍是會須要上面提到的變量 speedx，
小水珠x座標：刪除的雨滴x座標 + 刪除的雨滴長度 * speedx
小水珠y座標：刪除的雨滴y座標 + 刪除的雨滴長度
更新動畫時
這裏要用到小水珠對象的兩個屬性 vx（x軸的值的變化速度）和vy（y軸的值的變化速度），
小水珠的x座標
vx = vx + speedx / 2
小水珠的x座標 =原x座標 + vx，

speedx：上面提到的和鼠標移動方向相關的一個變量，這裏的做用就是用來控制小水珠的移動方向和其餘方向相同
speedx / 2，除2是爲了使讓小水珠在x軸的移動距離短一點，看上去更真實點

小水珠的y座標
vy = vy + gravity
小水珠的y座標 = 原y座標 + vy;，
vy：一個負數
gravity：重力，一個正數，完整代碼裏設置的是0.5
由於原y座標是一個正數，這樣小水珠y座標的值，就會先減少後增大，這是爲了實現小水珠會先上升後降低的效果，看圖

最後就是用canvas根據小水珠的座標屬性和半徑屬性畫圓弧就能夠了，弧度是隨機的

三、雨滴下落到鼠標座標必定範圍內，散成小水珠，一樣的，小水珠的移動方向也和鼠標移動方向相同

肯定圖中圓的大小容易，假設圓的半徑是35，咱們能獲取到鼠標的座標，以鼠標的座標爲圓心，35爲半徑，就肯定了圓的大小。
重點在於如何判斷，雨滴是否是進入了這個範圍，這就要用勾股定理了，看圖。

由於雨滴是兩個點連起來的一條線，要看雨滴是否是進入了這個範圍內，就是看雨滴靠下邊的點的座標，到鼠標的直線距離是多少，就是圖中AB線段的長度。

勾股定理：直角三角形的兩條直角邊的平方和等於斜邊的平方。

AB = Math.sqrt(BC*BC + AC * AC)

BC = 雨滴x座標 - 鼠標x座標
AC = 雨滴y座標 - 鼠標y座標
Math.sqrt()方法用來計算一個數的平方根

咱們知道雨滴到鼠標的直線距離後，和圓的半徑比較下，大於半徑就不在範圍內，不然就是在了。
若是在範圍內，就刪除雨滴，畫一些小水珠。

總結

要實現這個效果，麻煩的地方在於方向，雨滴方向，雨滴下落方向，小水珠移動方向，而這些都和鼠標移動方向相關，肯定各類方向後，根據距離，用canvas不斷的畫線，畫圓弧就好了。

完整代碼

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas>
  <script>
    window.onload = main;
    function main() {
      // 獲取canvas元素
      var canvasEl = document.getElementById('canvas');
      var ctx = canvasEl.getContext('2d');
      // canvas畫布的 背景顏色
      var backgroundColor = '#000';

      // canvas畫布的寬 等於 可視區域的寬
      canvasEl.width = canvasEl.clientWidth;
      // canvas畫布的高 等於 可視區域的高
      canvasEl.height = canvasEl.clientHeight;

      // 保存小水珠的數組
      // 雨滴下落後散成小水珠，小水珠就是一些圓弧
      var dropList = [];

      // 重力
      // 雨滴下落後散成小水珠，小水珠會先上升後降低，主要是由於 gravity 這個變量的緣故
      var gravity = 0.5;

      // 保存雨滴的數組
      // 每一個雨滴 都是 畫的一條線 
      var linelist = [];

      // 保存鼠標的座標 
      // mousePos[0] 表明x軸的值，mousePos[1] 表明y軸的值 
      var mousePos = [0, 0];

      // 跟隨鼠標， mouseDis 大小區域內的雨滴會消失，造成散落效果
      // 以mousePos爲圓心，mouseDis爲半徑，這個範圍內的雨滴 都會散開，造成許多小水珠
      var mouseDis = 35;

      // 更新一次動畫，畫lineNum 條雨滴，lineNum 值越大，下雨就越密集
      var lineNum = 3;

      // 跟隨鼠標方向 變化下雨方向的 速度
      // 鼠標移動後，下雨的方向 會慢慢改變，主要靠speedx 這個變量
      var speedx = 0;

      // maxspeedx 爲 speedx 能夠取的最大值
      // 當 speedx = maxspeedx時，下雨方向 會 隨鼠標移動方向當即改變
      var maxspeedx = 0;

      // 頁面大小發生變化時，重置canvas畫布大小
      window.onresize = function () {
        canvasEl.width = canvasEl.clientWidth;
        canvasEl.height = canvasEl.clientHeight;
      }

      //移動鼠標觸發事件
      window.onmousemove = function (e) {
        //  設置mousePos 等於 鼠標座標
        //  e.clientX 爲距離 瀏覽器窗口可視區域 左邊的距離
        //  e.clientY 爲距離 瀏覽器窗口可視區域 上邊的距離
        mousePos[0] = e.clientX;
        mousePos[1] = e.clientY;

        // 經過鼠標位置，設置 maxspeedx的值，取值範圍是 -1 到 1
        // maxspeedx的值，關係到 
        // 一、雨滴的方向
        // 二、雨滴下落的方向
        // 三、雨滴下落方向 跟隨 鼠標移動方向變化的速度
        // 四、小水珠的移動方向
        // 值越接近1，表示方向越向右
        // 值越接近-1，表示方向越向左
        maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2);
      }

      // 根據參數，返回一個rgb顏色，用於給雨滴設置顏色
      function getRgb(r, g, b) {
        return "rgb(" + r + "," + g + "," + b + ")";
      }

      // 畫 一滴雨（一條線）
      function createLine(e) {
        // 隨機生成 雨滴的長度
        var temp = 0.25 * (50 + Math.random() * 100);
        // 一個 line 對象，表明一個雨滴
        var line = {
          // 雨滴下落速度  
          speed: 5.5 * (Math.random() * 6 + 3),
          // 判斷是否刪除，值爲true就刪除
          die: false,
          // 雨滴x座標 
          posx: e,
          // 雨滴y座標 
          posy: -50,
          // 雨滴的長度
          h: temp,
          // 雨滴的顏色
          color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75))
        };
        // 把建立好的line（雨滴）對象，添加到保存雨滴的數組
        linelist.push(line);
      }

      // 畫一個小水珠（雨滴散開後的小水珠就是一個個的圓弧）
      function createDrop(x, y) {
        // 一個 drop 對象，表明一個圓弧
        var drop = {
          // 判斷是否刪除，值爲true就刪除
          die: false,
          // 圓弧圓心的x座標 
          posx: x,
          // 圓弧圓心的y座標 
          posy: y,
          // vx 表示 x軸的值 變化的速度
          vx: (Math.random() - 0.5) * 8,
          // vy 表示 y軸的值 變化的速度 取值範圍：-3 到 -9
          vy: Math.random() * (-6) - 3,
          // 圓弧的半徑
          radius: Math.random() * 1.5 + 1
        };
        return drop;
      }

      // 畫必定數量的小水珠
      function madedrops(x, y) {
        // 隨機生成一個數 maxi
        // maxi 表明要畫小水珠的數量
        var maxi = Math.floor(Math.random() * 5 + 5);
        for (var i = 0; i < maxi; i++) {
          dropList.push(createDrop(x, y));
        }
      }

      // 開始調用update函數，更新動畫
      window.requestAnimationFrame(update);
      // 更新動畫
      function update() {
        // 若是保存小水珠的數組有內容
        if (dropList.length > 0) {
          // 遍歷保存小水珠的數組
          dropList.forEach(function (e) {
            //設置e.vx，vx表示x座標變化的速度
            // (speedx)/2 是爲了，讓小水珠 在x軸的移動距離短一點，看上去更真實點
            // 也使 小水珠的移動方向 和 雨滴方向，雨滴下落方向，鼠標移動方向相同
            e.vx = e.vx + (speedx / 2);
            e.posx = e.posx + e.vx;
            
            //設置e.vy，vy表示y座標變化的速度
            // e.vy的範圍是-3 到 -9，而這時e.posy（y座標）必定是正值，因此 e.posy的值會先減少後增大
            // 也就是實現 雨滴散成小水珠，小水珠會先上升後降低的效果
            e.vy = e.vy + gravity;
            e.posy = e.posy + e.vy;

            // 若是 小水珠y座標 大於 可視區域的高度，設置die屬性爲true
            // 小水珠若是超出可視區域就刪除掉
            if (e.posy > canvasEl.clientHeight) {
              e.die = true;
            }
          });
        }

        // 刪除 die屬性爲ture 的數組成員
        // 可視區域外的小水珠刪除掉
        for (var i = dropList.length - 1; i >= 0; i--) {
          if (dropList[i].die) {
            dropList.splice(i, 1);
          }
        }

        // 設置下雨方向變換的速度，取值範圍： -1 到 1
        // 當 speedx = maxspeedx時，下雨方向 會 隨鼠標移動方向當即改變
        speedx = speedx + (maxspeedx - speedx) / 50;

        // 根據lineNum的值，畫必定數量雨滴
        for (var i = 0; i < lineNum; i++) {
          // 調用createLine 函數，參數是雨滴x座標
          createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width));
        }

        // 設置結束線，也就是雨滴散開 造成許多小水珠的位置
        var endLine = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5;

        // 遍歷保存雨滴的數組
        linelist.forEach(function (e) {

          // 利用勾股定理 肯定一個範圍，在這個範圍內雨滴會散開造成小水珠
          // e.posx + speedx * e.h 是雨滴x座標
          // e.posy + e.h 是雨滴y座標
          var dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos[0]) * ((e.posx + speedx * e.h) - mousePos[0]) + (e.posy + e.h - mousePos[1]) * (e.posy + e.h - mousePos[1]));

          // 若是在mouseDis區域內，就刪除雨滴，畫一些小水珠（圓弧）
          // 實現鼠標碰到雨滴，雨滴散成小水珠的效果
          if (dis < mouseDis) {
            // 刪除 雨滴
            e.die = true;
            // 畫一些小水珠（圓弧）
            madedrops(e.posx + speedx * e.h, e.posy + e.h);
          }

          // 若是雨滴超過 結束線，刪除雨滴，畫一些小水珠（圓弧）
          if ((e.posy + e.h) > endLine) {
            e.die = true;
            madedrops(e.posx + speedx * e.h, e.posy + e.h);
          }

          // 若是 雨滴 y座標 大於 可視區域的高度，設置die屬性爲true
          // 若是 雨滴 超出可視區域就刪除掉
          if (e.posy >= canvasEl.clientHeight) {
            e.die = true;
          } else {
            // 逐漸增長 雨滴 y座標的值
            e.posy = e.posy + e.speed;

            // 變化雨滴 x座標
            // * speedx 用來控制雨滴 下落 方向
            // 使 雨滴下落方向 和 鼠標移動方向相同
            e.posx = e.posx + e.speed * speedx;
          }
        });

        // 刪除 die屬性爲ture 的數組成員
        // 鼠標區域內的，超過結束線的，可視區域外的雨滴刪除掉
        for (var i = linelist.length - 1; i >= 0; i--) {
          if (linelist[i].die) {
            linelist.splice(i, 1);
          }
        }

        // 渲染
        render();
        // 遞歸調用 update，實現動畫效果
        window.requestAnimationFrame(update);
      }

      // 渲染
      function render() {
        // 畫一個和可視區域同樣大的矩形
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);

        // 畫雨滴效果
        ctx.lineWidth = 5;
        linelist.forEach(function (line) {
          ctx.strokeStyle = line.color;
          ctx.beginPath();
          ctx.moveTo(line.posx, line.posy);

          // * speedx 用來控制雨滴方向
          // 使 雨滴方向 和 鼠標移動方向相同
          ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
          ctx.stroke();
        });

        // 畫雨滴散開造成小水珠效果
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#fff";
        dropList.forEach(function (e) {
          ctx.beginPath();
          ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
          ctx.stroke();
        });

        // 解開註釋，可看見鼠標範圍
        /*
          ctx.beginPath();
          ctx.arc(mousePos[0], mousePos[1], mouseDis, 0, 2 * Math.PI);
          ctx.stroke();
        */
      }
    }
  </script>
</body>

</html>

最後說一句
這個特效的做者是 sxq111本尊大神，我只是站在巨人的肩膀上，喜歡的小夥伴們能夠去github上給個小star哦。