【uniapp】canvas在真机调试中层级问题

使用uniapp编写canvas代码时，在微信小程序中正常显示，但是到真机调试的时候canvas却始终在顶层。

小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。我试图用z-index解决时,并不能解决问题。

一、 解决方法一

按照别的博主解决问题的方法，调用uni.canvasToTempFilePath转变成图片，使用图片渲染出来。

<canvas id="myCanvas" v-if="!canvasSrc" canvas-id="myCanvas" :style="{ width: width + 'px', height: height + 'px' }" class="bg-set"></canvas>
<image :src="canvasSrc" v-if="canvasSrc" :style="{ width: width + 'px', height: height + 'px' }" ></image>

export default {
	data() {
		return {
		    ctx: null,
			canvasSrc: '',
		}
	}，
	methods: {
		init(){
		 //...你的逻辑代码
		 this.ctx.draw(false, () => {
				let self = this;
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: function(res) {
						self.canvasSrc = res.tempFilePath;
					},	
				})
			})
		}
	}
}

查看dom结构，发现最后是以图片形式显示的。

上面有个bug,虽然是以图片显示，但是图片大小时而溢出时而正常。

二、 解决方法二

uni官网提供一个解决方法，在canvas画布中使用cover-view标签。

注意： cover-view样式默认是visibility: hidden;
所以会出现dom树有结构，但是渲染不出来。
需要我们在需要的地方设置visibility: visible;
使页面可视化

<canvas id="myCanvas"   canvas-id="myCanvas" style="width: 200px; height: 200px;" >
	
	<cover-view style="visibility: visible;">
		<cover-view class="time">{{time}}</cover-view>
	</cover-view>
	
	<cover-image class="answer-gif" src="/static/run.gif"></cover-image>
	
</canvas>

cover-view标签内文字无法自动换行

解决方案 ：在对应的cover-view样式中添加如下样式
white-space: pre-wrap