Canvas渲染圆环进度条之后，真机测试他的层深是最高的，连tabbar都挡住了的解决方法

在 data 里面加上几个变量 如下:
data() {
return {
screenWidth: 0, // 屏幕宽度
canvasHide:false,
imgShow:false,
imgUrl:""
}
},

在Canvas的下面加一个image,用image 代替Canvas显示！
<image v-show="imgShow" :src="imgUrl" :style="{ width: diameter + 'rpx', height: diameter + 'rpx' }">
</image>
然后修改插件里面的draw方法
canvas.draw(false, (res) => {
if (res.errMsg == "drawCanvas:ok") {
setTimeout(() => {
var that = this
uni.canvasToTempFilePath({
canvasId: that.canvasId,
success: (res) => {
// 在H5平台下，tempFilePath 为 base64
this.imgShow = true
setTimeout(() => {
this.canvasHide = true
}, 100)
this.imgUrl = res.tempFilePath
},
fail: (err) => {
console.error(err, 'err')
}
}, that)
}, 1000)
}
}
);

这样就不会遮挡住tabbar 或者其他元素了！