.js中的代码 

drawBg:function(){

        const lineWidth = 6 / this.data.rate;//rpx转px
        const query = wx.createSelectorQuery()
        query.select("#progress_bg")//选择查找图片
        .fields({node : true , size : true})
        .exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const dpr = wx.getSystemInfoSync().pixelRatio
            canvas.width = res[0].width*dpr
            canvas.height = res[0].height*dpr  
            ctx.scale(dpr,dpr)
            ctx.lineCap='round'
            ctx.lineWidth=4
            ctx.beginPath()
            ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2-2*lineWidth,0,2 * Math.PI,false)
            ctx.strokStyle="#000000"
            ctx.stroke()
        })
    }
.wsml中的代码
 <view class="progress">
        <canvas class="progress_bg" id="progress_bg" type="2d"></canvas>
        <canvas class="progress_active" id="progress_active" type="2d"></canvas>
        <view class="progress_num">20:00</view>
    </view>
.wxss中的代码
.progress{
    margin-left: auto;
    margin-right: auto;
    margin-top: 200rpx;
    width: 400rpx;
    height: 400rpx;
    background-color: red;
    position: relative;
}
.progress .progress_background,.progress_avtive{
    position: absolute;
}
.progress .progress_num{
    position: absolute;
    font-style: italic;
    font-size: 50rpx;
    font-weight: bold;
    margin-left: 125rpx;
    margin-top: -300rpx;
}