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

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

2、如何解决canvas层级最高问题？                                                   

wx.canvasToTempFilePath转为图片，转为图片就能定义层级了

<template>  
 <canvas wx:if="{{!canvasSrc}}" class="cancas_wh" canvas-id="canvasArc3"></canvas>
   <image src="{{canvasSrc}}" class="img_canvas" mode="aspectFill"></image>
 </template>
 
  data = {
    canvasSrc: '',
}
  showScoreAnimation1(copyRightItems) {
//这里是绘制圆
    let that = this
    // 这部分是灰色底层
    let cxt_arc = wx.createCanvasContext('canvasArc1') //创建并返回绘图上下文context对象。
    cxt_arc.setLineWidth(6) //绘线的宽度
    cxt_arc.setStrokeStyle('#F3F3F3') //绘线的颜色
    cxt_arc.setLineCap('round') //线条端点样式
    cxt_arc.beginPath() //开始一个新的路径
    cxt_arc.arc(this.cxt_xx, this.cxt_xx, this.cxt_rr, 0, 2 * Math.PI, false) //设置一个原点(53,53)，半径为50的圆的路径到当前路径
    cxt_arc.stroke() //对当前路径进行描边
    //这部分是绿色部分
    cxt_arc.setLineWidth(6)
    if (copyRightItems <= 100) {
      cxt_arc.setStrokeStyle('#509234')
    } else {
      cxt_arc.setStrokeStyle('#f05b26')
    }
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath() //开始一个新的路径
    cxt_arc.arc(
      this.cxt_xx,
      this.cxt_xx,
      this.cxt_rr,
      (-Math.PI * 1) / 2,
      2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
      false
    )
    cxt_arc.stroke() //对当前路径进行描边
 
//这里是重点！！只要看这里就行  针对层级问题转图片
 
    cxt_arc.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'canvasArc1',
        success: function(res) {
console.log(res.tempFilePath, '图片地址')
//uploadImg方法是后台接口，为了上传到阿里云，转为网络图片地址
          uploadImg(res.tempFilePath, (url) => {
            that.canvasSrc = url
            console.log(urlh, '图片线上地址')
            that.$apply()
          })
        },
 
      })
    })
  }

 
// 设置 
.cancas_wh {
  width: 240rpx;
  height: 240rpx;
}
 
// 设置canvas图片的大小
.img_canvas {
  height: 280rpx;
  width: 280rpx;
}