先上效果圖：
實現過程採用3層繪圖，底層為灰色圓圈，中層為前景帶進度設定的綠色圓圈，頂層為100條白色線條，將圓圈分成虛線進度條。這樣實現的進度圈，可以在單個進度圈內部進行細分呈現更細緻的進度；
下面為wxml中**
class="cir"
style="width:212px; height:212px;"
canvas-id="canvasarc">
canvas>
.cir
onready: function
() cxt_arc.draw();
}
微信小程式 canvas 實現圓形進度條
先放效果圖，如下 對於圓形進度條中間的文字，如果是簡單的，可以用它自帶的屬性去填充。比較複雜的，就可以像下面，通過樣式將文字定位到圓形進度條中間合適位置。總數量 wxss檔案樣式如下 circlepage wrap circletext num line text canvas progress 1...
微信小程式之圓形進度條
使用setinterval 讓彩色圓環逐步繪製。wxml class container class progress box class progress bg canvas id canvasprogressbg canvas class progress canvas canvas id ca...
微信小程式 手寫簽名 微信小程式實現電子簽名功能
x.wxml bindtouchmove canvasmove bindtouchend canvasend touchcancel canvasend binderror canvasiderrorcallback 上傳簽名 清除簽名 js var context null 使用 wx.creat...