微信小程序 环形进度条_微信小程序：圆形进度条1

Canvas就是用来绘制图形的强强强大的标签，用它来绘制各种图案是很简单的事情。

1.首先，我们需要在页面中加入canvas标签

2.接下来，需要在js文件中绘制圆弧

page({

data:{},

onload:function(){

this.drawcircle(0.82);

},

/**

* 绘制圆形进度条,在使用的时候只需指定所要达到的百分比

*/

drawcircle: function (percent){

var rpx;

//获取屏幕宽度，获取自适应单位

wx.getSystemInfo({

success: function (res) {

rpx = res.windowWidth / 375;

}

});

// 绘出进度

var zero = -Math.PI * 1 / 2;//初始点为-2π

var eAngle = 2 * Math.PI * percent + zero;//结束点为 初始点 + 2π * 比例，2π为360°

const ctx = wx.createCanvasContext('circle');//获取绘图区域

//ctx.drawImage('/images/icon/44.png', 0, 0, 260 * rpx, 227.5 * rpx);

ctx.setLineWidth(6);//设置线宽

ctx.setStrokeStyle('#7ee3c5');//设置线条颜色

ctx.beginPath();//开始一个新的路径

ctx.arc(122 * rpx, 118.5 * rpx, 70 * rpx, zero, eAngle, false);//画一段圆弧

ctx.stroke();//对当前路径进行描边

ctx.draw();

},

})

效果如下图所示

image.png