H5 可堆叠的圆环进度条 ，支持任意数量子进度条

by Conmajia
SN: S22-W1M
⚠️ 由于安全设置，本文互动功能已失效

由来

看到一篇帖子《vue实用组件——圆环百分比进度条》，让我想起了很多年前我在WinForm下仿制过的Chrome进度条。

▲ 原版进度条

那时候我经常半夜接着酒劲儿用我的小破电脑跟GDI+ 较真儿，一转眼都快10年了。这日子过得还真是让人唏嘘呢。本来想翻出来纪念一下，可是以前的东西早他妈不知扔哪儿了，有点儿遗憾。再看看上边儿那进度条是Vue的，我现在还没本事玩儿，可是又手痒痒，先用H5做一个凑合吧。反正也是打发时间，少打几圈儿麻将呗。

特性 & Demo

说实在的，单进度条非做一圆，别的屁功能没有，真的没意思，不如来点儿添头，把一堆进度条都给揉里边儿。我相信一定有人能用上，别客气。

1. 可以堆叠任意数量子进度条
2. 计算总进度
3. 原生H5

▲ 新版进度条（静态演示）

代码

全是基础的东西。

非常简单，略去了一些不重要的东西，我写了点儿注释。

// ctx 为 canvas context
var ctx = g.getContext('2d');
// (x, y) 中心点
var x = g.width / 2, y = g.height / 2;
// p 保存所有子进度条，value 0-100%
var p = [{
  value: 0,
  color: 'orange'
}, 
...
{
  value: 0,
  color: 'blue'
}];

// 演示专用（略）：随机更新各个进度条 value，模拟走进度
function inc(a) {
...
}

// 计算总进度
function getTotal(a) {
  var t = 0;
  for(var i = 0; i < a.length; i++) {
    t += a[i].value;
  }
  return t / a.length;
}

// 画圆环。start、stop 起止点，以 scale 划分 360 度
function drawBand(start, stop, color = 'silver', scale = 100) {
  var div = Math.PI * 2 / scale;
  ctx.save();
  ctx.strokeStyle = color;
  ctx.lineWidth = 30;
  ctx.beginPath();
  ctx.arc(x, y, 100, start * div, stop * div, false);
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}

// 画所有子进度条
function drawProg(a) {
  for (var i = 0; i < a.length; i++) {
    var s = 0;
    // 计算起点
    for (var j = 0; j < i; j++) {
      s += a[j].value;
    }
    s /= a.length;
    drawBand(s, s + a[i].value / a.length, a[i].color);
    s = s + a[i].value;
  }
}

// 中心总进度文字
function drawLabel(n) {
...
}

// 动画循环
(function drawFrame() {
  window.requestAnimationFrame(drawFrame);
  ctx.clearRect(0, 0, g.width, g.height); // 清空绘图区
  drawBand(0, 100); // 画底环（0-100 刻度，默认色）
  drawLabel(total(p)); // 画进度文字
  drawProg(p); // 画所有进度条
  inc(p); // 模拟更新，演示专用
}());

代码就这么简单。老实说，其实这挺无聊的，bootstrap自带的进度条就能堆叠（当然那个是直线型的）；随便用个Chart.js、ECharts.js，也能轻轻松松实现这个效果，比这好上一万倍。

▲ 一个ECharts的例子

まあ，就当练手了呗，反正我的H5连门儿都还没入，弄出来也算熟悉熟悉，挺好的。

The End. $\Box$

var c = ['Navy', 'Blue', 'Aqua', 'Teal', 'Green', 'Lime', 'Yellow', 'Orange', 'Red', 'Maroon', 'Fuchsia']; var auto = true; var g = document.getElementById('canvas1'); var ctx = g.getContext('2d'); var x = g.width / 2; var y = g.height / 2; var rad = Math.PI * 2 / 100; var p = [{ speed: 0.2, value: 0, color: 'orange' }, { speed: 0.1, value: 0, color: 'blue' }, { speed: 0.2, value: 0, color: 'green' }, { speed: 0.4, value: 0, color: 'red' }]; $('#add').click(function(e) { e.preventDefault(); auto = true; add(); }); $('#remove').click(function(e) { e.preventDefault(); auto = true; remove(); }); $('#shuffle').click(function(e) { e.preventDefault(); auto = true; shuffle(); }); function add() { p.push({ speed: Math.random(), value: 0, color: c[Math.floor(Math.random() * (c.length))] }); } function remove() { p.pop(); } function shuffle() { for (var i = 0; i < p.length; i++) { p[i].value = Math.floor(Math.random() * 100); p[i].speed = Math.random(); } p=_.shuffle(p); } function inc(a) { if (!auto) return false; for (var i = 0; i < a.length; i++) { if (a[i].value <= 100) a[i].value += a[i].speed; } if (total(a) >= 100) { for (var i = 0; i < a.length; i++) { a[i].value = 0; } } } function total(a) { var t = 0; for (var i = 0; i < a.length; i++) { t += a[i].value; } return t / a.length; } function draw(s, l, p) { ctx.save(); ctx.strokeStyle = p.color; ctx.lineWidth = 30; ctx.beginPath(); ctx.arc(x, y, 100, Math.PI / 2 + s * rad, Math.PI / 2 + (s + p.value / l) * rad, false); ctx.stroke(); ctx.closePath(); ctx.restore(); } function drawProg(a) { for (var i = 0; i < a.length; i++) { var s = 0; for (var j = 0; j < i; j++) { s += a[j].value; } s /= a.length; draw(s, a.length, a[i]); s = s + a[i].value; } } function drawBand() { ctx.save(); ctx.lineWidth = 30; ctx.strokeStyle = "silver"; ctx.beginPath(); ctx.arc(x, y, 100, 0, Math.PI * 2, false); ctx.stroke(); ctx.closePath(); ctx.restore(); } function drawLabel(n) { ctx.save(); ctx.strokeStyle = "silver"; ctx.font = "40px Arial"; ctx.textAlign = "center"; ctx.fillText(n ? numeral(n).format("0.0") + "%" : "N/A", x, y + 15); ctx.stroke(); ctx.restore(); }(function drawFrame() { window.requestAnimationFrame(drawFrame); ctx.clearRect(0, 0, g.width, g.height); drawBand(); inc(p); drawLabel(total(p)); drawProg(p); }());