javascript - 在 Canvas 中绘制值的百分比。数学-Javascript

Question

我有一个数学编程问题。 我正在尝试计算可用性的百分比并绘制一个完整的圆圈来表示该值。

所以我有所有客户服务成员“allMemebrs”，并且我有可用的“availableMemebrs” 我是这样计算的:

var percentage = (100 * availableMemebrs) / allMemebrs;

现在我想在canvas javascript中画一个圆:

ctx.arc(50, 50, 20, 1.5 * Math.PI, percentage * 2 * Math.PI);

如果我从 0 开始画圈，这意味着:

ctx.arc(50, 50, 20, 0, percentage * 2 * Math.PI);

它会正确绘制它，但问题是我想从 1.5 * PI 绘制它，这就是问题。

我有点迷失了。有人可以帮忙吗？

Answer 1

根据mdn ，绘制圆弧的语法如下:

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

仅当您的 startAngle 为 0 时，您的 endAngle 才可以，如 Faly在他的回答中建议。

评论后编辑:

您可以设置距起点的默认偏移量。

var offset = 1.5 * Math.PI;
ctx.arc(50, 50, 20, offset, (percentage * 2 * Math.PI) + offset);