Маркировка на HTML5 метре / теге ProgressBar с использованием Canvas

Question

Я хочу пометить в различных точках, используя изображения / значки разных размеров на HTML5 Meter. Теперь я могу использовать для этого тег span, поместив его в разные части счетчика.

Есть ли другая альтернатива этому? Мне было интересно, смогу ли я использовать элемент canvas для этого.

Answer 1

С холстом или WebGL определенно было бы проще.

Пример холста, предполагая, что images - это массив объекта с полями image, x и y:

context.fillRect(0, 0, 100, 10); // Progressbar background. Alternatively, you could stroke it (draw a border).
context.fillRect(0, 0, 10, 10); // Draw the current progress. I've hard coded it to 10% here.
for (var i = 0; i < images.length; i++)
{
    var a = images[i]; // I'm lazy
    context.fillRect(a.x - 1, 0, 2, a.y); // less code than stroking
    context.drawImage(a, a.x, a.y);
}