多个进度圈同一个页面

Question

从this answer中激励自己，我想在我的页面上做几个进步圈（大约30个）。它非常适合一个人，但我没有得到价值观的圆圈。然而，我得到了正确显示的百分比。

我尝试了各种方法，将 [count] 添加到大多数选项，但仍然没有为每个单元格绘制圆圈。

我在 this Fiddle 中添加了我的代码。

你能看出哪里出了问题吗？

Answer 1

您的 drawCircle 函数需要更多信息（ctx 和半径）

var drawCircle = function(ctx, radius, color, lineWidth, percent) {
    percent = Math.min(Math.max(0, percent || 1), 1);
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
    ctx.strokeStyle = color;
    ctx.lineCap = 'round'; // butt, round or square
    ctx.lineWidth = lineWidth;
    ctx.stroke();
};

并且您需要在使用它时传递该信息：

drawCircle(ctx[count], radius[count], '#efefef', options[count].lineWidth, 100 / 100);
drawCircle(ctx[count], radius[count], color[count], options[count].lineWidth, options[count].percent / 100);

喜欢这里：https://fiddle.jshell.net/6ooL53pp/3/

多个进度圈同一个页面

multiple progress circle same page

javascript

css

canvas

progress