一、产生原因
因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。
二、解决方案
1.html页面的处理
加上一个判断wx:if=“{{!canvasImg}}”
<canvas
class="canvas-code"
canvas-id="QRcode"
wx:if="{{!canvasImg}}"
style="width: 240rpx; height: 240rpx;">
</canvas>
<image wx:else src="{{canvasImg}}" style="width: 240rpx; height: 240rpx;" />
2.js页面的处理
（1）data中声明一个变量canvasImg
data(){
return {
//canvas转化为图片的临时路径
canvasImg:"",
}
},
（2）新增方法：处理canvas转化为图片文章来源：https://www.toymoban.com/news/detail-521051.html
// 处理canvas转化为图片
handleCanvarToImg(){
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 120,
height: 120,
canvasId: 'QRcode',
success: (res) => {
//获取图片的临时路径
this.canvasImg = res.tempFilePath
}
});
},
原理：弹框出现时，canvas隐藏，image出现
（1）弹框显示，转化为image，不再进行处理，当前页面之后都以image进行显示（上面展示的是此方法相关代码）。
（2）弹框显示，转化为image，弹框消失，转化为canvas，该方法中需在弹框消失时，将canvasImg赋为null。文章来源地址https://www.toymoban.com/news/detail-521051.html
到了这里，关于canvas层级太高问题的解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
