小程序 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/100var n=0ctx.arc(c.width/2,c.height/2,100,-Math.PI/2,n*aa-Math.PI/2,false)n+=0.1原理就是这样