效果圖：

實現：

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。

使用起來簡單粗暴~。~

完整實現和使用程式碼下載：

博主其他上傳資源下載連結：

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

全屏播放視訊不拉伸原始碼：

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

android餃子播放器使用原始碼：

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

安卓環狀百分比顯示檢視原始碼：