js+HTML5 canvas 實(shí)現(xiàn)簡單的加載條(進(jìn)度條)功能示例

2019-11-19 11:10:40

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了js+HTML5 canvas 實(shí)現(xiàn)簡單的加載條(進(jìn)度條)功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>www.survivalescaperooms.com canvas實(shí)現(xiàn)加載條動畫</title>  </head>  <body>    <canvas id="loadingProgressCanvas"></canvas>    <script>      /*       * 獲取canvas, canvas本身沒有畫圖能力，相當(dāng)于一個畫布，提供繪制圖形的地方       * document.getElementsByTagName("canvas")[0]       * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")       * document.querySelectorAll("canvas")[0]       */      var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");      var ctx = loadingProgressCanvas.getContext("2d"); // 獲取繪制圖形的對象(畫筆)      drawFirst(); // 繪制初始狀態(tài)      var progress = 0; // 定義進(jìn)度      drawProgress(); // 繪制初始進(jìn)度      // 定義定時器, 100ms鐘繪制5%      var timer = setInterval("drawProgress()", 100);      // 繪制初始狀態(tài)      function drawFirst() {        ctx.fillStyle="#0000ff"; // 定義畫筆顏色, 重新繪制已經(jīng)加載的進(jìn)度條        /*         * 定義矩形(左上角x/y左邊,寬高)         */        ctx.rect(0, 0, 200, 30);        ctx.stroke(); // 繪制定義好的矩形路徑        ctx.fillStyle="#0000ff"; // 定義畫筆顏色, 重新繪制已經(jīng)加載的進(jìn)度條      }      // 繪制進(jìn)度條      function drawProgress() {        if(progress == 200) {          progress = 0;          ctx.clearRect(0, 0, 200, 30); // 清楚之前的繪制        } else {          ctx.moveTo(progress, 0); // 移動到上一次繪制的終點(diǎn),準(zhǔn)備繪制下一次的進(jìn)度          ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05          progress += 10;        }      }    </script>  </body></html>

運(yùn)行結(jié)果：