聊聊最近的圆环进度条效果 canvas 数组 动态 实现

最近需求要小程序加一个动态圆环的效果，小程序？圆环？听到这个需求，是不是头痛... 下面来解决你的头痛。

---

圆环我采用了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) return

let end_num = canvasArray[IND].end_num
let sAngle = canvasArray[IND].sAngle
let context = canvasArray[IND].context

if (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   //  数组选第几个canvas
this.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：130
ctx.draw();                                 // clearRect（）执行不带这个draw（），白干！

圆环画图动态效果就实现了，谢谢大家！

求比个心点个赞！