キャンバスを使用したHTML5 Meter/ProgressBarタグのマーケティング

Question

HTML5メーターで様々なサイズの画像/アイコンを使用してさまざまな時点でタグを付けたいとします。今私はスパンタグを使用して、それをメーターの様々な部分に置くことによってそれを行うことができます。

別の方法がありますか？キャンバス要素を使用することができるかどうかは不思議だった。

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