乐趣区

关于前端:聊聊最近的圆环进度条效果-canvas-数组-动态-实现

jiezi

最近需要要小程序加一个动静圆环的成果，小程序？圆环？听到这个需要，是不是头痛 … 上面来解决你的头痛。

圆环我采纳了 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（），白干！

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

求比个心点个赞！

退出移动版