Javascript 使用画布在HTML5米/进度条标签上标记

我想在HTML5仪表上使用不同大小的图像/图标在不同点进行标记。现在，我可以使用一个跨度标记，通过将其放置在仪表的各个部分来实现这一点

---

还有别的选择吗？我想知道是否可以使用canvas元素来实现这一点。

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

context.fillRect（0,0,100,10）；//进度条背景。或者，您可以对其进行笔划（绘制边框）。
context.fillRect（0,0,10,10）；//绘制当前进度。我在这里硬编码为10%。
对于（var i=0；i