小程序 canvas 画环形进度条，真机无法画图显示，求大神帮忙

Page({
  data: {
    // 开始角度
    startAngle: (.8 * Math.PI),
    // 结束角度
    endAngle: 2.2 * Math.PI,
    // 偏移角度
    xAngle: Math.PI / 180
  },
  
  onLoad: function () {   
    var that = this;
    var cxt_arc = wx.createContext();
    var endAngle = that.data.endAngle;
    var xAngle = that.data.xAngle;
    var templeAngle = that.data.startAngle;
    var rander = function () {
      if (templeAngle >= endAngle) {
        return;
      } else if (templeAngle + xAngle > endAngle) {
        templeAngle = endAngle;
      } else {
        templeAngle += xAngle
      }
      const grd = cxt_arc.createLinearGradient(0, 0, 170, 0)
      grd.addColorStop(0, '#fb9502')
      grd.addColorStop(1, '#fff118')
      cxt_arc.beginPath();
      cxt_arc.setLineWidth(6);
      cxt_arc.setStrokeStyle(grd)
      cxt_arc.setLineCap('round')
      cxt_arc.arc(125, 125, 120, that.data.startAngle, templeAngle);
      cxt_arc.stroke();
      cxt_arc.closePath();
     
      wx.drawCanvas({
        canvasId: 'canvasArc',
        actions: cxt_arc.getActions()
      })

      requestAnimationFrame(rander);
    }
    rander()
  },
})

 <canvas class="cir"  style="width:200px; height:200px;" canvas-id="canvasArc">