面向过程版本
| /** * 进度条动画 */ countdown: function () { this.getSystemInfo().then(v => { // 自适应 let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; size = parseInt(size); size = size % 2 ? size + 1 : size; let maxtime =30, sTime = +new Date, temp = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, schedule = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time) { // 绘制文字 this.setData({ schedule: 0 }); clearInterval(temp); }; }, 100); }); }, /** * 绘制 */ drew: function (schedule, val, size) { size = size || 66; const _ts = this; schedule = schedule >= 1 ? 1 : schedule; let text = parseInt(val - val * schedule), r = size / 2, deg = Math.PI / 180; _ts.setData({ width: size, height: size, schedule: text + 1 }); // 清除画布 ctx.clearRect(0, 0, size, size); // 绘制白色底 ctx.beginPath(); ctx.arc(r, r, r, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(255,255,255,1)'; ctx.closePath(); ctx.fill(); // 绘制橙色 ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.closePath(); ctx.fill(); // 绘制白色进度条 let v = schedule * 360; ctx.beginPath(); ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg); ctx.fillStyle = 'rgba(255,255,255,1)'; ctx.closePath(); ctx.fill(); // 中心蓝色底 ctx.beginPath(); ctx.arc(r, r, r - 12, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx.closePath(); ctx.fill(); // 绘制文字 ctx.strokeText(); // 统一画 ctx.draw(); }, |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
