微信小程序中CANVAS绘制的图形不能跟随画布移动？

Question

问题描述

页面右下角应用CANVAS绘制环形进度条，用postion:fixed来固定他的位置。。。当页面滚动的时候绘制出来的环形图并未跟随画布移动，而是停留在原地，当下一次调用setData方法时才更新了位置。而且最可气的是。。。开发工具上很完美，但是在真机上却很大的问题

附上WXML：

<view class="timmer" wx:if="{{!isRead}}">
  <circle class="timmerInner" wx:if="{{!isRead}}" id='circle1' text='{{txt}}' bg='circle_bg1' draw='circle_draw1' bind:runEvent="_runEvent">
    <view class="circle_info" bindtap="changeTime">
      <text class='circle_txt'>{{txt}}</text>
    </view>
  </circle>
</view>

WXSS：

.timmer {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 30rpx;
  right: -90rpx;
  /* z-index: 1000; */
}

.timmerInner {
  position: absolute;
}

JS：

let that = this
    // 设置倒计时 定时器 假设每隔100毫秒 count递增+1，当 count递增到两倍maxCount的时候刚好是一个圆环（ step 从0到2为一周），然后改变txt值并且清除定时器
    this.countTimer = setInterval(() => {
      if (this.data.count <= 2 * this.data.maxCount) {
        // 绘制彩色圆环进度条
        this.circle1.drawCircle(
          'circle_draw1',
          25,
          2,
          this.data.count / this.data.maxCount
        )
        this.data.count++
      } else {
        // clearInterval(this.countTimer)
        this.circle1.drawCircle('circle_draw1', 25, 2, 301)
      }
    }, 50)
    this.timmer = setInterval(() => {
      let counttxt = that.data.counttxt - 1
      if (counttxt >= 0) {
        that.setData({
          txt: counttxt + 'S',
          counttxt
        })
      } else {
        requestUtil.requestLoading(
          'setGraphicScore?graphicId=' +
            that.data.graphicId +
            '&login=' +
            that.data.userInfo.login,
          {},
          '',
          function(res) {
            that.setData({
              txt: '+' + res.addPoint
            })
            wx.showToast({
              title: '积分：+' + res.addPoint,
              icon: 'none',
              duration: 1500,
              mask: false
            })
            setTimeout(() => {
              that.setData({
                isRead: true
              })
            }, 1500)
          },
          function() {}
        )
        clearInterval(this.timmer)
      }
    }, 1000)
    setInterval(() => {
      that.setData({})
    }, 50)

现在能面前跟上都是因为在最后加了setData()去重新渲染页面。但是还是很不跟随啊！！！

附上组件：
https://segmentfault.com/a/11...

视频演示：https://www.bilibili.com/vide...

求大神帮助！！！