关于canvas画布内容阻挡view元素显示的层级问题

由于canvas所绘制出来的内容属于原生窗体，属于最高的层级所以无论把css的z-index属性值调到多大都不会遮挡住canvas所绘制的内容，因此我们需要将canvas转化为图片，将显示的内容由原本的canvas原生窗体转化为图片显示

let canvasPath = "" //绘制的canvas图片
ctx.draw(false, () => {
	setTimeout(() => {
		wx.canvasToTempFilePath({
			canvasId: "myCanvas",
			complete: function (res) 				
				canvasPath = res.tempFilePath,
                //二次转化保证图片能够成功获取
				if (!that.data.canvasPath) {
					setTimeout(() => {
						wx.canvasToTempFilePath({
						    canvasId: "myCanvas",
							complete: function (res) {
								canvasPath= res.tempFilePath,
							},
						})
					}, 300)
				}
			},
		})
	}, 300)
//添加计时器防止获取到的canvas的宽高为0
})

可以在图片未生成之前，先使用canvas暂时显示绘制的内容，图片生成后会自动替代

<view wx:if="{{!canvasPath}}">
    <canvas canvas-id="myCanvas" style="width: 310px; height: 530px;"></canvas>
</view>
<van-image wx:else width="310px" height="530px" src="{{canvasPath}}" />

 使用uniapp开发的小伙伴只需要件wx的对象改为uni就ok了

wx.canvasToTempFilePath => uni.canvasToTempFilePath

当然使用uniapp开发的小伙伴们也可以使用subNVues原生子窗体来达到遮挡canvas原生窗体的效果，后面如果有想要了解的小伙伴比较多的话，我也会出一期subNVues原生子窗体的详细教程