JS代碼：

Page({
 data: {},
 onLoad: function (options) {
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
 },
 onReady: function () {
  
  // 頁(yè)面渲染完成
  var cxt_arc = wx.createCanvasContext('canvasArc');//創(chuàng)建并返回繪圖上下文context對(duì)象。
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#d2d2d2');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//開始一個(gè)新的路徑
  cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//設(shè)置一個(gè)原點(diǎn)(106,106)，半徑為100的圓的路徑到當(dāng)前路徑
  cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
    
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle('#3ea6ff');
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//開始一個(gè)新的路徑
  cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
  cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
  
  cxt_arc.draw();
    
 },
 onShow: function () {
  // 頁(yè)面顯示
 },
 onHide: function () {
  // 頁(yè)面隱藏
 },
 onUnload: function () {
  // 頁(yè)面關(guān)閉
 }
})

頁(yè)面布局：

<view class="wrap">
 <view class="top">
  <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
  </canvas>
  
  <view class="cc">中間</view>
  
 </view>
</view>

CSS樣式：

.cir{
 display: inline-block;
 margin-top: 20rpx;
  
}
  
.top{
 text-align: center
}
  
.cc{
   
 margin-top: -120px;
   
}

以上就是微信小程序之制作自定義圓形進(jìn)度條的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！