微信小程式：靜态圓形進度條實作

效果圖：

實作：

function drawCircleProgress(canvasId, backStrokeColor,strokeColor,x,y,radius,percent,text,fontSize,fontColor){
  // console.log("canvasId : " + canvasId + " ; backStrokeColor : " + backStrokeColor + " ; strokeColor : " + strokeColor+
  //   " ; width : " + width + " ; height : " + height + " ; leftMargin : " + leftMargin + " ; topMargin : " + topMargin+
  //   " ; percent : " + percent + " ; text : " + text + " ; fontSize : " + fontSize + " ; fontColor : " + fontColor);

  // var radius = (Math.min(width, height) / 3.5)-6;
  // var x = (width+leftMargin)/2.5;
  // var y = (height+topMargin)/2.5;

  // var cxt_arc = wx.createCanvasContext(canvasId);//建立并傳回繪圖上下文context對象。
  // cxt_arc.setLineWidth(6);
  // cxt_arc.setStrokeStyle(backStrokeColor);
  // cxt_arc.setLineCap('round')
  // cxt_arc.beginPath();//開始一個新的路徑
  // cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//設定一個原點(106,106)，半徑為100的圓的路徑到目前路徑
  // cxt_arc.stroke();//對目前路徑進行描邊

  // cxt_arc.setLineWidth(6);
  // cxt_arc.setStrokeStyle(strokeColor);
  // cxt_arc.setLineCap('round')
  // cxt_arc.beginPath();//開始一個新的路徑
  // cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
  // cxt_arc.stroke();//對目前路徑進行描邊

  // var finalSize = fontSize/2;
  // cxt_arc.beginPath();
  // cxt_arc.setFontSize(finalSize);
  // cxt_arc.setFillStyle(fontColor);
  // cxt_arc.fillText(text, x-(finalSize+2), y+5);

  // cxt_arc.draw();

  var cxt_arc = wx.createCanvasContext(canvasId);//建立并傳回繪圖上下文context對象。
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle(backStrokeColor);
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//開始一個新的路徑
  cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//設定一個原點(106,106)，半徑為100的圓的路徑到目前路徑
  cxt_arc.stroke();//對目前路徑進行描邊

  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle(strokeColor);
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//開始一個新的路徑
  cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
  cxt_arc.stroke();//對目前路徑進行描邊

  var finalSize = fontSize / 2;
  cxt_arc.beginPath();
  cxt_arc.setFontSize(finalSize);
  cxt_arc.setFillStyle(fontColor);
  cxt_arc.fillText(text, x - (finalSize + 2), y + 5);

  cxt_arc.draw();
}
           

參數：

1.重點參數：canvasId-wxml裡面canvas标簽的canvas-id；x,y-圓心點坐标；radius-圓半徑

2.顯示效果配置參數：backStrokeColor-圓環背景色；strokeColor-圓環顔色；percent-百分比占比；text-圓中心顯示文字（如：“60%”）；fontSize-text的文字大小；fontColor-text的字型顔色

注：涉及到尺寸的參數機關都是px。

使用：

1.wxml

<canvas canvas-id='canvasId'></canvas>

此處的canvasId替換成你傳給drawCircleProgress方法的canvasId。

2.js

在onload生命周期回調中調用drawCircleProgress。

使用起來簡單粗暴~。~

完整實作和使用代碼下載下傳：

https://download.csdn.net/download/yonghuming_jesse/10738500

部落客其他上傳資源下載下傳連結：

自制免費無廣告小說閱讀APP下載下傳：

https://download.csdn.net/download/yonghuming_jesse/10390364

全屏播放視訊不拉伸源碼：

https://download.csdn.net/download/yonghuming_jesse/10646274

科大訊飛語音評測服務接入源碼：

https://download.csdn.net/download/yonghuming_jesse/10616924

android餃子播放器使用源碼：

https://download.csdn.net/download/yonghuming_jesse/10619119

視訊播放前顯示視訊第一幀源碼：

https://download.csdn.net/download/yonghuming_jesse/10646332

安卓環狀百分比顯示視圖源碼：

https://download.csdn.net/download/yonghuming_jesse/10677919

      最後推薦給一些想進大廠或者還沒有拿到心儀offer的攻城獅們一本書，由大廠java面試官胡書敏編寫，滿滿的幹貨，助你進到想去的公司。