【微信小程序】解决canvas组件层级最高问题

问题截图

1、为什么canvas组件总是会在最上层？
因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。

2、如何解决canvas层级最高问题？                                                                                                                                                    使用wx.createCanvasContext通过canvas-id创建canvas绘图对象，在绘制完画布之后生成图片，在页面内使用image组件展示画布生成的图片，同时给canvas组件加一个fixed定位设定一个超过页面的高宽top或者left值。

3、代码实现

//js文件

    let ctx = wx.createCanvasContext("canvasRound", this);//根据wxml定义的canvas-id来创建绘图context对象。

    ctx.draw(false, ()=> {
        // 延迟保存图片，解决生成图片错位bug。
        setTimeout(() => {
            this.canvasToTempImage();
          }, 400);
        });

    canvasToTempImage: function() {
      wx.canvasToTempFilePath({
        canvasId: "canvasRound",
        success: (res) => {
          let tempFilePath = res.tempFilePath;
          this.setData({
            imagePath: tempFilePath,
          });
        }
      }, this);
    }

//wxml文件

<image src="{{imagePath}}" class="lucky-index-img"></image>

<canvas class="lucky-index-round" canvas-id="canvasRound"></canvas>

//wxss文件

.lucky-index-round{
  position: fixed;
  top: 9999rpx;
  left: 0;
  width: 188rpx;
  height: 188rpx;
}