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

原理就是这样