4

そこで、1x1 ピクセルで埋め尽くされたかなり大きなキャンバスを作成していたので、そのロード画面を作成したいと考えました。キャンバスを埋めるループが終了した後の問題は、ロードが終了したことを警告しますが、キャンバスは実際には変更されていません。デモ用にここでjsfiddleを作成しました。javascript または Jquery を使用してキャンバスが実際に読み込まれた時期と、この動作の原因を実際に確認するにはどうすればよいですか?

var ctx=document.getElementById('canvas').getContext('2d');
for(var x=1;x<600;x++){
    for(var y=1;y<600;y++){
        var color= '#' + Math.floor (Math.random() * 16777215).toString(16);
        ctx.fillStyle=color;
        ctx.fillRect(x,y,1,1);
    }
}
alert('done!');
4

2 に答える 2

2

ロード進行アニメーションのようなものです。実行中の関数からのアニメーションの更新/進行は、通常、すぐには機能しません (その関数が終了すると画面が更新されます)。

キャンバス コードは (自動的に)onload関数にラップされます: window.onload=function(){ /*your code here*/ };.
その関数の最後の行は であるalert('done!');ため、当然、画面が更新される前にアラートボックスが表示され、ノイズが表示されます。

1 つの解決策は、最初に 1 つのセットと表示のローディング イメージを表示し、次にsetTimeOut(たとえば 30 ミリ秒) を使用してキャンバスをレンダリングし、そのキャンバス関数を別の setTimeOut で終了してローディング イメージを再度削除することです。

注: おそらくご存じのとおり、コードは と のような (多くの) 16 進数の色を生成しますが#3df5、#5d8a6どちらも有効な色ではありません! また、16777215 を使用しましたが、Math.random() に 16777216 を掛ける必要があります。これを修正するには、
color='#'+((Math.random()+1)*16777216|0).toString(16).substr(1);
以下を試してみてください。

例として、この JSFiddleの結果を参照してください。

お役に立てれば。

于 2013-05-05T13:09:09.233 に答える