こんにちは。 最近、私はJavaScriptキャンバスをよく扱います。特に、多くの写真をロードする必要があるために交通量を必要とするあらゆる種類のおもちゃを書いています。
通常、約50〜100 kbの圧縮JavaScriptが最初にロードされ、その後に特定の数の画像（たとえば、500 kb、2 mb、10 mbなど）が読み込まれ、その後、ゲーム自体が開始されます。 もちろん、途中でロードすることもできますが、テクスチャが不足しているとプレーヤーが満足することはほとんどありません。
そのため、適切な、すてきな、簡単にカスタマイズ可能な（プロジェクトからプロジェクトにすばやく変更する）プログレスバーを作成する必要があると判断しましたが、必ずしも写真を使用する必要はありません。 猫の下では、ソースはLGPLの下でライセンスされており、これを行う方法についての簡単な説明があり、記事の最後に結果へのリンクがあります。
私は、コードの独自性と天才について特別な称賛を表明しないとすぐに言わなければなりません。 コードはシンプルで、非常にトリッキーなトリックはありませんが、初心者は自分にとって興味深いものを見つけることができると思います。
ツールキット
標準の強力なJSフレームワークであるla Jquery（私が本当に気に入っている）は冗長であり、同時に必要なニーズをカバーしていないため、Canvasを使用している間は、DOMを使用する必要はありません。 私は独自のミニフレームワークを使用します。これは、DOMの軽量ラッパー、標準プリミティブの拡張機能などを提供します;）utils.jsファイル。
また、元の
context . getContext ( '2d' );
をわずかに拡張するCanvasExpander.jsファイルもあり
context . getContext ( '2d' );
context . getContext ( '2d' );
。 必要な機能...
utils / Traceクラスに注意を払いたいです。 firebugはFirefox3.7aでは動作しないため、オブジェクトの出力が必要でした。 また、Firebagとは異なり、同じブロックに情報を表示できます。これは、たとえばFPSの数を表示するときに非常に便利です。 ブロックを1回クリックするか、場合によってはダブルクリックして無効にします。
var tr = new Trace ();
setInterval (function () {
tr . trace ( fps );
}, 20 );
それに基づいて、FpsMeterクラスが作成されます。 フレームの開始前に毎回、オブジェクトのframe（）メソッドを呼び出し、最後のnフレームの平均fpsを表示します（作成時にパラメーターによって渡されます。例のコードを参照）
インターフェース
まず、インターフェースを定義しましょう。 いつものように、私の画像のアップロードは次のようになります。
var id = new ImageDownloader ({
wallBrick : "/images/walls/brick-512px.png" ,
wallWood : "/images/walls/wood-256px.png" ,
sectoid : "/images/aliens/grey-64-256px.png"
// And So On
});
setInterval (function () {
if ( id . ready ) {
outputMainData ( id . getImages ());
}
}, 20 );
これにより、URLについて考えるのではなく、コードでイメージ名のみを使用できます。 例えば、
Images [ 'wallBrick' ]
。 ただし、progressBarを追加するため、パブリックプロパティprogressを追加してインターフェイスをわずかに拡張する必要があります（もちろん、getterを使用する方が正確ですが、これはそれほど重要ではありません）
setInterval (function () {
if ( id . ready ) {
outputMainData ( id . getImages ());
} else {
progBar . setProgress ( id . progress ). draw ();
}
}, 20 );
ImageDownloaderのソースコードは特に興味がありません。そのため、私は個人的に3.4秒で0から100％に進捗をスムーズに上げるスタブを作成しました。
progressBarを作成する
draw（）メソッドで何を書きますか？
私たちのクラスを呼び出すと、プログラマーは内部で何が起こっているのかわかりません。なぜなら、彼の設定と
context . fillColor
には何も起こらないことを期待しているからです
context . fillColor
context . fillColor
などは同じままです。 これを行うには、
context . saveValues ();
を使用してフィールドを保存し
context . saveValues ();
context . saveValues ();
、レンダリング後、
context . loadValues ();
を使用して元の値を復元し
context . loadValues ();
context . loadValues ();
（CanvasExpander.js）。
this . drawBorder ();
進捗状況のラッパーを描く
これで行自体。 写真が5秒で読み込まれるとします。 そして、キャンバスは0.02秒（50 fps）ごとに再描画されます。 したがって、この時間中にラインはスクラッチから250回再生成されます。 この行を生成する場所に別のバッファを作成し、その後、画面に対応する部分を表示する方がはるかに有益です。 別のCanvas要素を作成し、その中に描画します。その後、それを取得します（メソッド
ProgressBar . createBuffer ();
）、メソッド内のボディを結合する行のコメントを
ProgressBar . createBuffer ();
結果を確認できます）
これで描画が完了したので、フレームごとに簡単に使用できます。
ctx . drawImage ( line , 0 , 0 , width * prog , height ,
c . x + 1 , c . y + 1 , width * prog , height );
lineは、キャンバスのHTML要素です。
スタイルの再集計
プログレスバーのスタイルが変更されるたびに、countSizesメソッドが呼び出されます。このメソッドは、ゼロ未満のすべての数値をパーセントと見なします。 これにより、キャンバス要素の大きさに関係なく、プログレスバーが同じように見えます。 まず、ピクセル単位の幅が計算されます。 Canvasの幅が800ピクセルで、スタイル['width'] = 0.8であるとします。 進行状況バーの幅は640ピクセルになります。 他のすべての値は、プログレスバーの幅または高さ（ 'blendHeight'、 'blendVAlign'、 'textSize'、 'textVAlign'）に依存します。 これにより、比率を変更せずに、要素を使用してマスターベーションを行うことができます。
スクリプト自体
すべてのソースは、難読化されていないライセンスの中にあります：LGPL。