摘要：最近學(xué)了點(diǎn)，做了個(gè)滴滴的進(jìn)度條效果，由于本人未使用過滴滴，所以不太清楚該具體效果以及該頁(yè)面是怎樣的。這樣就有進(jìn)度條的效果了。進(jìn)度條圓的厚邊框，自行設(shè)置方法將繪圖狀態(tài)置為保存值。

最近學(xué)了點(diǎn)canvas，做了個(gè)滴滴的進(jìn)度條效果，由于本人未使用過滴滴，所以不太清楚該具體效果以及該頁(yè)面是怎樣的。yy出了以下效果：

先從簡(jiǎn)單的圓開始吧！

代碼：

let c = document.getElementById("myCanvas")
// getContext() 方法返回一個(gè)用于在畫布上繪圖的環(huán)境。
let ctx = c.getContext("2d")
// 起始一條路徑，或重置當(dāng)前路徑
ctx.beginPath()
// 創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）
ctx.arc(100, 75, 50, 0, 2*Math.PI)
// 繪制已定義的路徑
ctx.stroke()

這里貼出arc()函數(shù)說明：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

有興趣的同學(xué)可以進(jìn)入鏈接查看更多屬性和方法： http://caibaojian.com/html5-c...

接下來我們繪制圓環(huán)以及動(dòng)畫：

let canvas = document.getElementById("myCanvas"),
    context = canvas.getContext("2d"),
    cirX = canvas.width/2,
    cirY = canvas.height/2,
    rad = Math.PI*2/100,
    n = 0,
    r = 45;

繪制圖形并生成動(dòng)畫：

function DreamLoading() {
  // clearRect() 方法清空給定矩形內(nèi)的指定像素。
  context.clearRect(0,0,canvas.width,canvas.height);
  writeCircle();
  writeText(n);
  writeOrange(n);
  if(n < 100) {
    n = n + 0.1
  } else {
    n = 100;
  }
  window.requestAnimationFrame(DreamLoading);
}

當(dāng)我們寫window.requestAnimationFrame(回調(diào)函數(shù))時(shí)，瀏覽器會(huì)在下次重繪前執(zhí)行回調(diào)函數(shù)。這樣就有進(jìn)度條的效果了。

畫圓：

function writeCircle() {
  // 畫個(gè)圓
  // save() 方法把當(dāng)前狀態(tài)的一份拷貝壓入到一個(gè)保存圖像狀態(tài)的棧中。這就允許您臨時(shí)地改變圖像狀態(tài)，然后，通過調(diào)用 restore() 來恢復(fù)以前的值。
  context.save();
  context.beginPath();
  context.strokeStyle = "#FF8C00";
  context.arc(cirX,cirY,r,0,Math.PI*2,false);
  context.stroke();
  context.restore();
}

進(jìn)度條：圓的厚邊框，lineWidth自行設(shè)置

function writeOrange(n) {
  context.save();
  context.strokeStyle = "#FF8C00";
  context.lineWidth = 3;
  context.beginPath();
  context.arc(cirX,cirY,r,-Math.PI/2,-Math.PI/2+rad*n,false);
  context.stroke();
  // restore() 方法將繪圖狀態(tài)置為保存值。
  context.restore();
}

文本，百分比效果：

function writeText(n) {
  context.save();
  context.strokeStyle = "#FF8C00";
  context.font = "20px Arail";
  context.strokeText(n.toFixed() + "%", cirX-30,cirY+10);
  context.stroke();
  context.restore();
}

百分比進(jìn)度條效果全部代碼：

倒計(jì)時(shí)效果代碼：

let minute = 1
      const Time = minute*60
      let second = 0
      render(minute, second)
      const interval = setInterval(() => {
        if (second < 60) {
          second--
          if (second < 0) {
            second = 59
            minute--
          }
        }
        if(minute == 0 && second == 0) {
            clearInterval(interval)
        }
        render(minute, second)
      },1000)

      function render(minute, second) {
        if (minute < 10) {
          document.querySelector(".minute").innerText = "0" + minute;
        } else {
          document.querySelector(".minute").innerText = minute;
        }
        if (second < 10) {
          document.querySelector(".second").innerText = "0" + second;
        } else {
          document.querySelector(".second").innerText = second;
        }
      }

完整代碼：

   


  
  
  
  
  


  

    

      
    
    

      派單中
    
    

      取消訂單
    
  
  

    
    
系統(tǒng)選擇司機(jī)
    

      
:
      
秒倒計(jì)時(shí)
    
  
  

不夠精確，在計(jì)算的時(shí)候有些錯(cuò)誤。希望同學(xué)們能一起解決。謝謝！