关于原生小程序canvas标签始终显示再最上层问题

官方说明：

https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

 

解决方法：

1. 将canvas正常绘制
2. 对canvas进行定位，远离手机屏幕显示区域
3. 将canvas转换为img图片，将转换后的图片进行展示
4. 如果图片清晰度不够，则将canvas成倍的绘制，将转换后的图片按照正常尺寸展示即可

<view wx:if="{{isImg}}" class="pic" style="text-align: center;">
   <canvas
     class="qrCode"
     bindtap="refresh"
     style="width:{{ width*6 }}px;height:{{ width*6 }}px;position: absolute;top:-99999999px;left:-999999999999px;"
     canvas-id="ticketQrCode"
   ></canvas>
   <image class="qrCode" style="width:{{ width }}px;height:{{ width }}px" bindtap="refresh" src="{{codeImg}}" />
 </view>



async qrCode() {
      const xy = (this.data.width - 20) / 2
      const res = await getQrCodeUnique({ orderNo: this.data.orderInfo.orderNo })
      this.setData({
        codeInfo: `orderNo=${this.data.orderInfo.orderNo}&uid=${res.data}&type='shuttle'`,
      })
      // eslint-disable-next-line no-new, new-cap
      new drawQrcode({
        width: this.data.width,
        height: this.data.width,
        canvasId: 'myQrcode',
        text: `orderNo=${this.data.orderInfo.orderNo}&uid=${res.data}&type='shuttle'`,
        image: {
          imageResource: '../resources/mogo.png',
          dx: xy,
          dy: xy,
          dWidth: 23,
          dHeight: 23,
        },
      })
      setTimeout(() => {
        this.createImg()
      }, 100)
    },

createImg() {
      const _this = this
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: _this.data.width,
        height: _this.data.width,
        destWidth: _this.data.width,
        destHeight: _this.data.width,
        canvasId: 'myQrcode',
        success(res) {
          _this.setData({
            imgUrl: res.tempFilePath,
          })
        },
      })
    },