在HTML5 Meter/ProgressBar标记上使用Canvas标记

Question

我想在HTML5 Meter上使用不同尺寸的图像/图标在各个点进行标记。现在我可以使用span标签将其放置在仪表的各个部分。

有没有其他的选择呢？我想知道我是否可以使用canvas元素来做到这一点。

Answer 1

使用canvas或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); 
}