uniapp开发小程序时出现canvas组件层级过高怎么解决 解决方案

uniapp开发小程序时出现canvas组件层级过高怎么解决，解决方案有哪些？下面小编给大家简单介绍一下。

思路：通过将canvas转成图片的形式解决

组件代码

<canvas canvas-id="canvasLine" v-show="!charImg" id="canvasLine" class="charts" disable-scroll="true" @touchstart="touchLine"
@touchmove="moveLine" @touchend="touchEndLine"></canvas>
<!-- image用来解决canvas组件层级过高问题 -->
<image v-if="charImg" :src="charImg" class="charts"></image>

js代码

// 解决canvas层级过高，遮挡弹出层的问题;
            handleCanvarToImg(that) {
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: uni.upx2px(702),
                    height: uni.upx2px(544),
                    canvasId: 'canvasLine',
                    success: function(res) {
                        that.charImg = res.tempFilePath;
                        // console.log('that.charImg',that.charImg);
                    }
                });
                
            }

上面方法就是将canvas转成图片然后修改图片的层级关系，解决canvas层级过高的问题。