微信小程序实现美美的虚线圆形进度圈

先上效果图：



实现过程采用3层绘图，底层为灰色圆圈，中层为前景带进度设置的绿色圆圈，顶层为100条白色线条，将圆圈分成虚线进度条。这样实现的进度圈，可以在单个进度圈内部进行细分呈现更细致的进度；

下面为wxml中代码

<canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
</canvas>

下面为wxss样式代码

.cir{
display: inline-block;
margin-top:20rpx;
}

下图为js实现代码，其中某些变量可以更改显示效果；

onReady: function () {
var waste_pce = 20;
// 页面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(14);
cxt_arc.setStrokeStyle('#b2b2b2');
cxt_arc.setLineCap('square')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 80, 0, 2 * Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边

cxt_arc.setLineWidth(14);
cxt_arc.setStrokeStyle('#09bb07');
cxt_arc.setLineCap('square');
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 80, -Math.PI * 51 / 100, (Math.PI * waste_pce/ 50 - Math.PI * 51 /100), false);
cxt_arc.stroke();//对当前路径进行描边

cxt_arc.setLineWidth(1);
cxt_arc.setStrokeStyle('#ffffff');
cxt_arc.setLineCap('square');
cxt_arc.beginPath();//开始一个新的路径
//画100条放射白线实现虚线效果
for(var i=0;i<100;i++)
{
var x = Math.PI*2/100*i;
cxt_arc.moveTo(106, 106);
cxt_arc.lineTo((106 + Math.sin(x)*90), (106 + Math.cos(x)*90));
cxt_arc.stroke();
}
cxt_arc.draw();
}