Конвертировать шаги индикатора в пиксели в Javascript

Question

Я реализовал простой индикатор выполнения в javascript, используя элемент холста html 5.Индикатор выполнения должен отображать 100 шагов.(0-100%) Индикатор выполнения должен иметь переменный размер, который может быть установлен пользователем.Итак, для каждого шага я рисую прямоугольник.

Например: - Холст индикатора выполнения имеет ширину 100 пикселей.- На каждом шаге я рисую новый блок шириной в один пиксель.

Проблема: - Ширина холста индикатора выполнения составляет 550 пикселей.Размер шага будет равен 5,5 пикселей (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> подходящей заменой?