文章主要介绍了详解微信小程序——自定义圆形进度条，具有一定的参考价值，实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。
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; }
以上就是微信小程序之制作自定义圆形进度条的详细内容。