js+HTML5 canvas 實現簡單的加載條(進度條)功能示例

2019-11-19 11:10:40

字體：大中小

來源：轉載

供稿：網友

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

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>www.companysz.com canvas實現加載條動畫</title>  </head>  <body>    <canvas id="loadingProgressCanvas"></canvas>    <script>      /*       * 獲取canvas, canvas本身沒有畫圖能力，相當于一個畫布，提供繪制圖形的地方       * 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(); // 繪制初始狀態      var progress = 0; // 定義進度      drawProgress(); // 繪制初始進度      // 定義定時器, 100ms鐘繪制5%      var timer = setInterval("drawProgress()", 100);      // 繪制初始狀態      function drawFirst() {        ctx.fillStyle="#0000ff"; // 定義畫筆顏色, 重新繪制已經加載的進度條        /*         * 定義矩形(左上角x/y左邊,寬高)         */        ctx.rect(0, 0, 200, 30);        ctx.stroke(); // 繪制定義好的矩形路徑        ctx.fillStyle="#0000ff"; // 定義畫筆顏色, 重新繪制已經加載的進度條      }      // 繪制進度條      function drawProgress() {        if(progress == 200) {          progress = 0;          ctx.clearRect(0, 0, 200, 30); // 清楚之前的繪制        } else {          ctx.moveTo(progress, 0); // 移動到上一次繪制的終點,準備繪制下一次的進度          ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05          progress += 10;        }      }    </script>  </body></html>

運行結果：