1

キャンバスを使用して軽量のプログレス バーを作成しようとしています。このプロジェクトの目標は、特定の変数から N パーセントまでプログレス バーを埋めることです。このデモでは、手動で 50% の塗りつぶしを設定しました。

2 つの色があります。ロードされたときに塗りつぶされる赤と、進行状況が完了したことを表す緑です。

緑の塗りつぶしの進行をアニメーション化するにはどうすればよいですか?

http://jsfiddle.net/ZpRm7/

var canvas = document.getElementById('myProgress');
var myPerc = 500;
ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255, 0, 0)";  //red

ctx.fillRect(0,0,myPerc,100);
ctx.save();
    for (var i=0;i<(myPerc*0.5);i++)
    { 
        ctx.fillStyle = "rgb(0, 255, 0)";  //green
            setTimeout(function() {
                    ctx.fillRect(0,0,+i,100);
            }, 1000);   

    }
4

1 に答える 1

1

投稿されたコードには2つの問題があります。まず、各タイムアウトの期間を 1000 に設定します。これは、各タイムアウトが 1 秒ですべて同時に終了することを意味します。代わりに、それらを1秒離してほしいと仮定しています。

i2 番目は、のループでの使用に関する非常に一般的な問題setTimeoutです。その答えは SO のいたるところにあります。これは、より徹底したものの 1 つと思われます: ループ内の JavaScript クロージャー – シンプルで実践的な例

これらの問題の両方が修正されると、次のようになります。

var canvas = document.getElementById('myProgress');
var myPerc = 500;
ctx = canvas.getContext('2d');

ctx.fillStyle = "rgb(255, 0, 0)";  //red

ctx.fillRect(0,0,myPerc,100);
ctx.save();

for (var i=0;i<(myPerc*0.5);i++)
{ 
    ctx.fillStyle = "rgb(0, 255, 0)";  //greeen

    (function(i){
        setTimeout(function() {
            ctx.fillRect(0,0,+i,100);
        }, 1000*i);
    })(i);
}

http://jsfiddle.net/ZpRm7/1/

setInterval一度に非常に多くのタイムアウトを作成しないようにするために、または他のアプローチを検討することができます。

于 2013-01-08T19:49:53.343 に答える