app内重新加载下面组件1-5次内就有一次canvas不显示；但h5端则没有这个问题；

<template>
<view class="ringProgress"><canvas class="canvas" :canvas-id="ids" :id="ids"></canvas></view>
</template>
<script>
export default {
props: {
// 占百分比
num: {
default: 0
},
ids: {
default: 'canvas'
}
},
data() {
return {};
},
mounted() {
let that = this;
let width = uni.upx2px(203);
let height = uni.upx2px(203);
let radius = width / 2;
that.init(width / 2, height / 2, radius);
},
methods: {
init(x, y, radius) {
let that = this;
let arriveNum = (this.num / 100) 2 + 0.3;
const ctx = uni.createCanvasContext(that.ids, this);
// console.log(this.ids,ctx)
// 大圈
ctx.beginPath();
ctx.arc(x, y, radius - 10, 0, 2 3.14);
ctx.setStrokeStyle('#1F92FF');
ctx.setLineWidth(10);
ctx.stroke();
// 小圈
ctx.beginPath();
ctx.arc(x, y, radius - 10, 0.3 3.14, arriveNum 3.14);
ctx.setStrokeStyle('#00D030');
ctx.setLineWidth(20);
ctx.stroke();

        // 文字  
        ctx.setFillStyle('#333333'); //文字颜色：默认黑色  
        ctx.setFontSize(13);  
        ctx.fillText('到课率', x / 2 + 5, y - 10, 2 * radius);  
        ctx.fillText(that.num + '%', x / 2 + 5, y + 10, 2 * radius);  
        ctx.draw();  
    }  
}  

};
</script>

<style lang="scss">
.canvas,
.ringProgress {
width: 203rpx;
height: 203rpx;
}
</style>