收藏
回答

canvas在编辑器可以显示,真机不显示

问题模块 操作系统 工具版本
开发者工具 macOS 1.7

这是HTML代码

<view class="canvas-wrap">
   <view class="top">
     <canvas class="cir" style="width:110rpx; height:110rpx; z-index: 1" canvas-id="canvasArc"> </canvas>
     <canvas class="cir" style="width:110rpx; height:110rpx; z-index: 2" canvas-id="canvasProcess"></canvas>
   </view>

这是js代码

data: {
    countState: 0
  },
ready: function() {
  let cxt_arc = wx.createCanvasContext('canvasArc');
    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#E8E8E8');
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath();
    cxt_arc.arc(27, 27, 24, 0, 23 * 23 * Math.PI, false);
    cxt_arc.stroke();
    cxt_arc.draw();
    this.countDown();   
}
/**
   * 组件的方法列表
   */
method: {
  countDown: function() {
      let countDown = setInterval(() =>{
        let countNum = this.data.countState;
        countNum ++;
        this.setData({
          countState: countNum         
        })
        let pathEx = countNum * 0.2 + 1.5;
        if(pathEx > 2) {
          pathEx = pathEx - 2;
        
        if(countNum == 10) {
          clearInterval(countDown);
        }
        let cxt_process = wx.createCanvasContext('canvasProcess');
        cxt_process.setLineWidth(6);
        cxt_process.setStrokeStyle('#F3C62A');
        cxt_process.setLineCap('round')
        cxt_process.beginPath();
        cxt_process.arc(27, 27, 24, 1.5 * Math.PI, pathEx * Math.PI, false);
        cxt_process.stroke();
        cxt_process.draw();
      }, 1000)
    }
}

在编译器上是正常运行的,但是在真机上是不显示的

最后一次编辑于  2018-01-03  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • eleon
    eleon
    2018-03-19

    我也有这个问题。

    解决没?

    2018-03-19
    赞同
    回复