Question

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

例如： - 进度条画布的宽度为100px。 - 在每一步我绘制一个新的像素宽块。

问题： - 进度条画布的宽度为550px。 - 步长块大小为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);

Answer 2

我知道这不是直接适用于您的问题 - 但<progress>是否是合适的替代品？

将进度条步骤转换为Javascript中的像素

2 个答案: