微信小程序 环形进度条_微信小程序实现圆形进度条动画

本文实例为大家分享了微信小程序动画之圆形进度条，供大家参考，具体内容如下

上图：

代码：

js：

//获取应用实例

var app = getApp()

var interval;

var varName;

var ctx = wx.createCanvasContext('canvasArcCir');

Page({

data: {

},

drawCircle: function () {

clearInterval(varName);

function drawArc(s, e) {

ctx.setFillStyle('white');

ctx.clearRect(0, 0, 200, 200);

ctx.draw();

var x = 100, y = 100, radius = 96;

ctx.setLineWidth(7);

ctx.setStrokeStyle('#BFEFFF');

ctx.setLineCap('round');

ctx.beginPath();

ctx.arc(x, y, radius, s, e, false);

ctx.stroke()

ctx.draw()

}

var step = 1, startAngle = 1.5 * Math.PI,