HTML代码
<canvas id="myCanvas{{index}}" canvas-id="myCanvas{{index}}" class="progress-canvas"></canvas>
CSS代码
.progress-canvas {width: 150rpx; height: 150rpx; position: absolute; top: -50rpx; right: -10rpx;}
js代码
const query = that.createSelectorQuery();
query.select('#myCanvas').boundingClientRect(res => {
let surplusVal = 60;
this.drawRing('myCanvas', res.width, res.height, surplusVal);
}).exec();
圆的大小可以通过修改下面数字来改变
//绘制半圆
drawRing(canvasId, width, height, angle){
var context = wx.createCanvasContext(canvasId, this);
// 外层圆环
context.beginPath()
context.arc(width / 2, height - 15, width / 2 - 10, 1 * Math.PI, 3 * Math.PI)
context.setLineWidth(5)
context.setLineCap('round')
context.setStrokeStyle('#999')
context.stroke()
// 外层进度圆环
context.beginPath()
// 1.x轴 ,2y轴,3,半径,
context.arc(width / 2, height-15 , width / 2 - 10,Math.PI * ( 2.8/ 1),
Math.PI * (2.8 / 1) + angle / 100 * (Math.PI * 7 / 5))
context.setLineWidth(5)
context.setLineCap('round')
context.setStrokeStyle('#ffcc66')
context.stroke()
context.draw()
},