小程序实现半环（弧形）进度条或者百分比

小程序实现半环（弧形）进度条或者百分比

1.效果图如下

2.上代码

    /**
     * 组件的初始数据
     */
    data: {
    score:50
    },
    onLoad: function () {
       this.setdetail()
    },
	// 给进度条赋值
	setdetail(){
		const query = this.createSelectorQuery()
       query.select('#ring').boundingClientRect(res => {
           this.drawRing('ring', res.width, res.height, this.data.score)
       }).exec()
}
    /**
     * 组件的方法列表
     */
     // 设置进度条数据
   setjindutiao(){
        drawRing: function (canvasId, width, height, angle) {
            var context = wx.createCanvasContext(canvasId, this)
            // 外层圆环
            context.beginPath()
            context.arc(width / 2, height - 60, width / 2 - 50, 1 * Math.PI, 3 * Math.PI)
            context.setLineWidth(7)
            context.setLineCap('round')
            context.setStrokeStyle('#DFB157')
            context.stroke()

            // 外层进度圆环
            context.beginPath()
            // 1.x轴 ，2y轴，3，半径，
            context.arc(width / 2, height-60 , width / 2 - 50,Math.PI * ( 2.8/ 1),
            Math.PI * (2.8 / 1) + angle / 100 * (Math.PI * 7 / 5))

            context.setLineWidth(7)
            context.setLineCap('round')
            context.setStrokeStyle('#F05337')
            context.stroke()
            context.draw()
        },
    }

// wxml片段
<canvas id="ring" canvas-id="ring" class="progress-canvas" >
</canvas>

3. 图的大小是根据宽高设定的，自己设置好

.progress-canvas {
    width: 100%;
    height: 400;
    position: relative;
}