微信小程序中解决canvas 层级过高问题

微信小程序中解决canvas 层级过高问题

---

前言

map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，无法进行遮挡实现一些特定的效果。

---

一、问题背景

（1）微信官网

在微信小程序的社区也有类型的问题，官方给出的解决办法是将其进行隐藏，在需要时进行显示。

来张飞机票

（2）个人项目背景

个人进行小程序开发过程中，自定义canvas，canvas层级太高，影响页面下效果

二、解决方案

（1）微信小程序文档中有提供cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。弊端是不可以使用input组件。

（2）将canvas在渲染后变成图片进行展示：wx.canvasToTempFilePath

wxml

<view class="canvas-box">
   <canvas
      canvas-id="special-canvas"
      wx:if="{{!canvasImg}}"
   ></canvas>
   <image wx:else src="{{canvasImg}}" />
</view>

js

handleCanvasToImg(that) {
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 260,
    height: 180,
    canvasId: 'radarCanvas',
    success: function(res) {
      that.setData({ radarImg: res.tempFilePath});
    }
  });
},
 
//注意在canvas绘制结束之后在调用此方法

---