小程序 canvas 环形进度条 怎么添加画图动画效果

Question

Page({
  data: {
  },
onReady: function () {
 
    // 页面渲染完成 
    var cxt_arc = wx.createCanvasContext('canvas1');//创建并返回绘图上下文context对象。 

    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#80868a');
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath();//开始一个新的路径 
    cxt_arc.arc(125, 125, 120, Math.PI * 0.8, 2.2 * Math.PI, false);//设置一个原点(125,125)，半径为120的圆的路径到当前路径 
    cxt_arc.stroke()//对当前路径进行描边 


    cxt_arc.draw();

  },
})

Answer 1

画第二个圆的时候 每次调整一下角度

var aa=Math.PI*2/100
var n=0
ctx.arc(c.width/2,c.height/2,100,-Math.PI/2,n*aa-Math.PI/2,false)
n+=0.1

原理就是这样