小程序 canvas 画环形进度条,真机无法画图显示。

发布于 2022-09-06 21:02:57 字数 1284 浏览 15 评论 0

小程序 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">

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

薄凉少年不暖心 2022-09-13 21:02:58

微信小程序不支持requestAnimationFrame

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文