微信小程序cover-view安卓手機不能覆蓋遮住canvas的BUG重現

首先是wxml代碼:

<view class="canvasContainer clearfix">
  <!-- 第一個 -->
  <view class='progress_box' style='height:{{canvasW +  40}}px;width:{{canvasW}}px;' wx:for="{{canvasData}}" wx:key="*this">
    <canvas class="progress_bg" canvas-id="canvasProgressbg-{{index}}" style='height:{{canvasW}}px;width:{{canvasW}}px;'> </canvas>
    <canvas class="progress_canvas" canvas-id="canvasProgress-{{index}}" style='height:{{canvasW}}px;width:{{canvasW}}px;'> </canvas>
    <view class="progress_text">
      <!-- <image src='../../image/{{imgarr[index]}}'></image> -->
    </view>
    <view class='equName'>
      <text>{{equName[index]}}：</text>
      <text>11/2{{index}}</text>
    </view>
  </view>
</view>
<!-- <cover-view>遮布層 -->
<cover-view class='stationBox' animation="{{animation}}">
  <cover-view class='tips' bindtap='moveBtn'>
    <!-- <cover-image src='{{imgUrl}}'></cover-image> -->
  </cover-view>
  <cover-view class='station'>
    <cover-view class='list-item-title'>
      <cover-view>房間列表</cover-view>
      <!-- <cover-image src='../../image/sx.png' catchtap='sxBtn'></cover-image> -->
    </cover-view>
    <cover-view class='select'>
      <block wx:for="{{[1,2,3,4,5,7,8,9,10,11,12,13,14]}}" wx:key="this">
        <cover-view class='list-item-box textEllipsis'>
          測試呀---{{index}}
        </cover-view>
      </block>
    </cover-view>
  </cover-view>
</cover-view>

　　

樣式代碼,WXSS文件

/* canvas畫圓的樣式 */

.progress_box {
  position: relative;
  /* 這里的寬高是必須大於等於canvas圓環的直徑 否則繪制到盒子外面就看不見了,一開始設置 width:440rpx; height:440rpx; 發現 在360X640分辨率的設備，下繪制的圓環跑盒子外去了,小程序使用rpx單位適配 ，但是canvas繪制的是px單位的。所以只能用px單位繪制的圓環在盒子內顯示 */
  /* width: 220px;
  height: 220px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  float: left;
}

.progress_bg {
  position: absolute;
  /* width: 220px;
  height: 220px; */
}

.progress_canvas {
  /* width: 220px;
  height: 220px; */
}

.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress_info {
  font-size: 36rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
}

.progress_dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fb9126;
}
.progress_text image {
  width: 3rem;
  height: 3rem;
}
.equName {
  position: absolute;
  bottom: 0;
  display: flex;
  font-size: 0.8rem;
}
/* 清除浮動 */

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.cfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  zoom: 1;
}

　　js代碼:

const app = getApp()

Page({
  data: {
    imgarr: ["cjq.png", "fj.png", "sj.png", "kt.png"],
    wrapColor: ["#40a1ff", "#4ecb76", "#955ee1", "#e37254"],
    equName: ["空調", "風機", "采集器", "水浸"]
  },
  onLoad: function() {
    this.dataFun();

  },
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function() {
    let windW = wx.getSystemInfoSync().windowWidth;
    let canvasW = windW / 3;

    this.setData({
      canvasW: canvasW
    });

    var arr = [1, 2, 3, 4];

    for (let i = 0; i < arr.length; i++) {
      //底層canvas的ID
      let canvasID = "canvasProgressbg-" + i;
      //外層canvas的ID
      let wrapCanvasID = "canvasProgress-" + i;

      this.drawProgressbg(canvasID, canvasW);

      this.drawCircle(arr[i] * 0.5, wrapCanvasID, canvasW, this.data.wrapColor[i]);
    }

  },
  //延遲模擬數據
  dataFun: function() {
    //延遲500ms,模擬網絡請求時間
    setTimeout(() => {
      this.setData({
        canvasData: [1, 2, 3, 4]
      })
    }, 500)

  },
  // 畫圓函數
  drawProgressbg: function(canvasId, canvasW) {
    let ctx = wx.createCanvasContext(canvasId, this);
    ctx.setLineWidth(8); // 設置圓環的寬度
    ctx.setStrokeStyle('#404c58'); // 設置圓環的顏色
    ctx.setLineCap('round') // 設置圓環端點的形狀
    ctx.beginPath(); //開始一個新的路徑
    ctx.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, 0, 2 * Math.PI, false);
    //設置一個原點(110,110)，半徑為100的圓的路徑到當前路徑
    ctx.stroke(); //對當前路徑進行描邊
    ctx.draw();
  },
  // 畫彩色圓環的函數drawCircle
  drawCircle: function(step, wrapCanvasID, canvasW, wrapColor) {
    let context = wx.createCanvasContext(wrapCanvasID);
    // 設置漸變
    var gradient = context.createLinearGradient(200, 100, 100, 200);
    gradient.addColorStop("0", wrapColor);
    gradient.addColorStop("0.5", wrapColor);
    gradient.addColorStop("1.0", wrapColor);

    context.setLineWidth(8);
    context.setStrokeStyle(gradient);
    context.setLineCap('square')
    context.beginPath();
    // 參數step 為繪制的圓環周長，從0到2為一周 。 -Math.PI / 2 將起始角設在12點鍾位置 ，結束角 通過改變 step 的值確定
    context.arc(canvasW / 2, canvasW / 2, canvasW / 2 - 20, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
    context.stroke();
    context.draw()
  }
})