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

更新時間：2019年07月16日 11:35:30 作者：愛在彩虹

這篇文章主要介紹了js+HTML5 canvas 實現(xiàn)簡單的加載條(進度條)功能,涉及javascript使用時間函數(shù)與canvas繪圖結合實現(xiàn)進度條的相關操作技巧,需要的朋友可以參考下

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

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>www.dbjr.com.cn canvas實現(xiàn)加載條動畫</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(); // 繪制初始狀態(tài)
      var progress = 0; // 定義進度
      drawProgress(); // 繪制初始進度
      // 定義定時器, 100ms鐘繪制5%
      var timer = setInterval("drawProgress()", 100);
      // 繪制初始狀態(tài)
      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>

運行結果：