• 1、原生组件层级问题（最高层）
• 2、canvas绘制圆形图片
• 3、canvas的draw()，需要等图片加载完毕之后绘制才生效
  ps:在真机测试过，成功~

原生组件canvas始终在顶层

1、解决方式
– 1、cover-view
– > 覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。
– 2、cover-image
– > 覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里

canvas绘制圆形图片

tip:使用clip() 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）

1、使用clip方法对画布进行裁剪

canvas的draw()需要等待图片加载完毕再绘制

• 使用promise 解决

完整踩坑demo：

wxml:

<view class="page-body-wrapper">
    <canvas canvas-id="canvas" class="canvas">
      <!-- 需要覆盖在原生组件上面的内容 -->
      <cover-view class="cover-view" bindtap="tap1">cover-view1--tap1</cover-view>
      <cover-view>
        <cover-view class="cover-view" bindtap="tap2">cover-view2-tap1 </cover-view>
      </cover-view>
      <cover-view class="image-cnt">
        <cover-image class="cover-image" bindtap="tap2" src="/images/game.png" />
      </cover-view>
      <!-- 需要覆盖在原生组件上面的内容 -->
    </canvas>
  </view>

wxss:

.canvas {
  width: 304px;
  height: 304px;
   margin:  0 auto;
  background-color:aquamarine;
}

.cover-view {
  margin-left: 52px;
  margin-top: 70px;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color:rgba(0,0, 0, .7);
  color: #fff;
}

.image-cnt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30px;
}

.cover-image {
  width: 50px;
  height: 50px;
}

js:

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    userInfo: {}
  },

  onLoad: function() {
    var user_icon = 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL6D31uFSDvq03aysJaxjBGVbQ8o3eRn4J1UWCmica3Os9NRcuafMicJCgg5Wblej8g12xYj1SeFMyQ/132';
    const ctx = wx.createCanvasContext('canvas')
    ctx.setFillStyle('#e2e2e2');
    ctx.arc(150, 100, 80, 0, 2 * Math.PI);//设置头像描边
    ctx.fill();
    ctx.restore();
    ctx.beginPath();//开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
    ctx.setFillStyle('#ccc');
    ctx.arc(150, 100, 78, 0, 2 * Math.PI);
    ctx.fill();
    ctx.clip();//一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）

    // 确保图片加载了之后再进行绘制
    var promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: user_icon,
        success: function(res) {
          resolve(res);
        }
      });
    });
    Promise.all([promise1]).then(function(values) {
      console.log(values[0].path);
      ctx.drawImage(values[0].path, 70, 20, 160, 160);//绘制图片
      ctx.draw();
    });

  },
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo);
    this.setData({
      'userInfo': e.detail.userInfo
    })
  },
  tap1: function() {
    console.log('tap1')
  },
  tap2: function() {
    console.log('tap2')
  }
})

ps：还是多认真看看文档

参考：
– https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
– https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html