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

详情参考微信小程序文档原生组件

1、为什么canvas组件总是会在最上层？

由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

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

方法一：用原生组件覆盖原生组件

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
比如：cover-view只支持嵌套 cover-view、cover-image、button。

方法二：让canvas在图片和canvas间切换

因为cover-view只支持嵌套 cover-view、cover-image、button，对于canvas上显示弹窗中的input之类的需求就不太符合。

思路：在data里定义了一个canvasImg，然后在wxml中判断，是否这个值是否有效，若有效，canvas隐藏；否则，显示canvas。然后在页面渲染canvas时，执行了wx.canvasToTempfilepath方法，将雷达图转化为图片。此时给canvasImg赋值，canvas隐藏，image显示。下面是具体实现代码：

wxml:

<view class="canvas-content">
   <canvas
      canvas-id="myCanvas"
      wx:if="{{!canvasImg}}"
      style="width: 260px; height: 180px;">
   </canvas>
   <image wx:else src="{{canvasImg}}" style="width: 260px; height: 180px;" />
</view>

js:

// 需要让 弹窗等 出现在canvas上的事件
handleCanvarToImg() {
  var that=this;
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 260,
    height: 180,
    canvasId: 'myCanvas',
    success: function(res) {
      that.setData({ canvasImg: res.tempFilePath});
    }
  });
},
// 最后弹窗等消失时，触发的事件中需将canvasImg初始化（=null）