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

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>www.dhdzp.com canvas實(shí)現(xiàn)加載條動(dòng)畫</title>
  </head>
  <body>
    <canvas id="loadingProgressCanvas"></canvas>
    <script>
      /*
       * 獲取canvas, canvas本身沒有畫圖能力，相當(dāng)于一個(gè)畫布，提供繪制圖形的地方
       * document.getElementsByTagName("canvas")[0]
       * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")
       * document.querySelectorAll("canvas")[0]
       */
      var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");
      var ctx = loadingProgressCanvas.getContext("2d"); // 獲取繪制圖形的對(duì)象(畫筆)
      drawFirst(); // 繪制初始狀態(tài)
      var progress = 0; // 定義進(jìn)度
      drawProgress(); // 繪制初始進(jìn)度
      // 定義定時(shí)器, 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); // 移動(dòng)到上一次繪制的終點(diǎn),準(zhǔn)備繪制下一次的進(jìn)度
          ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05
          progress += 10;
        }
      }
    </script>
  </body>
</html>

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