微信小程序 自定義圓形進度條，具體如下：
無圖無真相，先上圖：
實現思路，先繪制底層的灰色圓圈背景，再繪制上層的藍色進度條。
代碼實現：
JS代碼：
Page({ data: {}, onLoad: function (options) { // 頁面初始化 options為頁面跳轉所帶來的參數 }, onReady: function () { // 頁面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//創建并返回繪圖上下文context對象。 cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#d2d2d2'); cxt_arc.setLineCap('round') cxt_arc.beginPath();//開始一個新的路徑 cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//設置一個原點(106,106)，半徑為100的圓的路徑到當前路徑 cxt_arc.stroke();//對當前路徑進行描邊 cxt_arc.setLineWidth(6); cxt_arc.setStrokeStyle('#3ea6ff'); cxt_arc.setLineCap('round') cxt_arc.beginPath();//開始一個新的路徑 cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false); cxt_arc.stroke();//對當前路徑進行描邊 cxt_arc.draw(); }, onShow: function () { // 頁面顯示 }, onHide: function () { // 頁面隱藏 }, onUnload: function () { // 頁面關閉 } }) 頁面布局：
<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; } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
