多个进度圈同一个页面

【问题标题】：multiple progress circle same page多个进度圈同一个页面
【发布时间】：2017-02-05 21:35:04
【问题描述】：

受到this answer的启发，我想在我的页面上做几个进度圈（大约30个）。它非常适合一个人，但我没有得到值的圆圈。但是，我得到正确显示的百分比。

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

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

你能看出哪里不对吗？

【问题讨论】：

标签： javascript css canvas progress

【解决方案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/

【讨论】：