2
我想在HTML5 Meter上使用不同尺寸的圖像/圖標在各個點進行標記。現在我可以使用span標籤將其放置在儀表的各個部分。在HTML5 Meter/ProgressBar標記上使用Canvas標記
有沒有其他的選擇呢?我想知道我是否可以使用canvas元素來做到這一點。
我想在HTML5 Meter上使用不同尺寸的圖像/圖標在各個點進行標記。現在我可以使用span標籤將其放置在儀表的各個部分。在HTML5 Meter/ProgressBar標記上使用Canvas標記
有沒有其他的選擇呢?我想知道我是否可以使用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);
}