无图无真相，先上图：
实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。
代码实现：
JS代码：
// 页面渲染完成
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,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,-Math.PI 1 / 2,Math.PI6/5,false);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.draw();
},onShow: function () {
// 页面显示
},onHide: function () {
// 页面隐藏
},onUnload: function () {
// 页面关闭
}
})
页面布局：
<view class="cc">中间
CSS样式：
}
.top{
text-align: center
}
.cc{
margin-top: -120px;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
