收藏
回答

这个进度条怎么做的呢?

先说一下想要的效果

这是在别人的  数据都是渲染的   这样的效果是正确的

这个效果怎么做呢

 求大佬帮忙解决  感谢

最后一次编辑于  11-14
回答关注问题邀请回答
收藏

2 个回答

  • 周赟
    周赟
    11-14

    canvas自己画

    11-14
    赞同
    回复 1
    • 糖果沐123😉
      糖果沐123😉
      11-15
      我画了只会显示一个出来  不会循环从出来  这是我代码
      drawProgressbg: function () {
          // 使用 wx.createContext 获取绘图上下文 context
          var ctx = wx.createCanvasContext('canvasProgressbg')
          ctx.setLineWidth(4);// 设置圆环的宽度
          ctx.setStrokeStyle('#fff'); // 设置圆环的颜色
          ctx.setLineCap('round') // 设置圆环端点的形状
          ctx.beginPath();//开始一个新的路径
          ctx.arc(110, 110,50, 1 * Math.PI, 0 * Math.PI, false);
          //设置一个原点(110,110),半径为100的圆的路径到当前路径
          ctx.stroke();//对当前路径进行描边
          ctx.draw();
        },
        drawCircle: function (step) {
          var context = wx.createCanvasContext('canvasProgress', this);
          // 设置渐变
          var gradient = context.createLinearGradient(200, 100, 100, 200);
          gradient.addColorStop("0", "#2661DD");
          // gradient.addColorStop("0.5", "#40ED94");
          // gradient.addColorStop("1.0", "#5956CC");
          context.setLineWidth(4);
          context.setStrokeStyle(gradient);
          context.setLineCap('round')
          context.beginPath();
          // 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
          context.arc(110, 110, 50, 1 * Math.PI, step * Math.PI, false);
          context.stroke();
          context.draw()
        },
      11-15
      回复
  • 子不语
    子不语
    11-14

    https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html

    https://sevenhao.github.io/qhao/web/css-aritcle/css-property/CSS%E5%AE%9E%E7%8E%B0%E5%9C%86%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1.html

    11-14
    赞同
    回复 2
    • 糖果沐123😉
      糖果沐123😉
      11-15
      用css写出来呀  会不会不正常呀
      11-15
      回复
    • 子不语
      子不语
      11-15回复糖果沐123😉
      不会
      11-15
      回复
问题标签