最近需要要小程序加一个动静圆环的成果，小程序？圆环？听到这个需要，是不是头痛... 上面来解决你的头痛。
圆环我采纳了canvas
1、首先，咱们在wxml文件外面写入
<canvas class="myCanvas" canvas-id="canvasid{{index}}"></canvas>2、第二步去写js
一个函数给你本人领会
在后面先定义 for (let i = 0; i < len; i++) { let obj = {} obj.strat_num = 0 // 圆环的起始点 obj.end_num = 100 // 圆环的起点 obj.sAngle = 1.5 * Math.PI // 圆面积公示是2 PI，这里小设1.5 obj.eAngle = 0 // 面积起始点 obj.timer = null // 动画定时器 obj.context = new wx.createCanvasContext('canvasid' + i); // 创立数组画笔 canvasArray.push(obj)}定义好了咱们就开始function canvas(end, IND) {// end : 你想要进度条达到第几步，假如进度条100份，end 能够设 动静值// IND : 一个canvas满足不了我，我的canvas是一个数组，IND是 下标// canvasArray 数组画图var that = this;if (canvasArray.length == 0) returnlet end_num = canvasArray[IND].end_numlet sAngle = canvasArray[IND].sAnglelet context = canvasArray[IND].contextif (end >= canvasArray[IND].strat_num) { // 计算公式 不加形容 canvasArray[IND].eAngle = canvasArray[IND].strat_num * 2 * Math.PI / end_num + 1.5 * Math.PI; // 这里开始就做动画了，延时器走起 canvasArray[IND].timer = setTimeout(function () { // 色彩突变，想设置就设置 // let gradient = context.createLinearGradient(50, 0, 50, 100); // gradient.addColorStop("0", "#00D2C4"); // gradient.addColorStop("0.3", "#00D2C4"); // gradient.addColorStop("0.6", "#00D2C4"); // gradient.addColorStop("1.0", "#00D2C4"); // context.setStrokeStyle(gradient) if (end < 90) { // 圆角、直角想设置就设置 context.lineCap = "round"; } context.setStrokeStyle('#00D2C4') context.setLineWidth(4) context.arc(65, 65, 60, sAngle, canvasArray[IND].eAngle, false) context.stroke() context.draw() canvasArray[IND].strat_num++ that.canvas(end, canvasIND) }, 20)} else { clearTimeout(canvasArray[IND].timer) }}3、函数都写好了，第三步去触发就行了
canvasIND = e.currentTarget.dataset.index // 数组选第几个canvasthis.canvas(30,canvasIND) // 那就执行，先小跑 30 步clearTimeout(canvasArray[IND].timer) // 在第二次执行先，要先清掉上次的提早器this.canvas(100,canvasIND) // 这次我决定一下子跑完100 步4、次要的都写进去了，有人问，我想清空画图怎么办，持续看
let ctx = canvasArray[canvasIND].context; // 拿到那支笔canvasArray[canvasIND].strat_num = 0 // 重置步数 ctx.clearRect(0, 0, 130, 130); // 这个是清空你的画布，我的画布是width：130，height：130ctx.draw(); // clearRect（）执行不带这个draw（），白干！