javascript - 在 Javascript 中将进度条步骤转换为像素

Question

我使用 html 5 canvas 元素在 javascript 中实现了一个简单的进度条。进度条应该能够显示 100 个步骤。 (0-100%) 进度条应该能够具有可变的大小，可以由用户设置。 因此，对于每一步，我都会绘制一个矩形。

例如: - 进度条 Canvas 的宽度为 100px。 - 在每一步中，我都会绘制一个新的一像素宽的 block 。

问题: - 进度条 Canvas 的宽度为 550px。 - 步 block 大小为 5.5px(550/步) - 我无法绘制半像素。如果我使用 Math.floor 或 Math.Round，进度条将不会填满 100%，或者会“填满”。

我该如何解决这个问题？

var percWidth = Math.round(canvas.width / 100);

for (var i = 0; i<= percentage; i++)
{

var r,g,b;
if (i <= 50)
{
   r = 255;
   g = Math.round((255*i)/50);
   b = 0;
}
else
{
   r = Math.round((255*(100-i))/50);
   g = 255;
   b = 0
 }

 context.fillStyle = "rgb("+r+", "+g+", "+b+")";
 context.fillRect((i*percWidth), 0, (1*percWidth), canvas.height);

}

Answer 1

仅对最终结果进行四舍五入:

context.fillRect(Math.round(i*canvas.width / 100), 0, (percWidth), canvas.height);