0

私はこれについてどのように行くのだろうか？描画、1 秒待ち frame2 を描画 1 秒待ち frame3 を描画 1 秒待ち。クリア アニメーション キャンバス

今、60 fps での現在のゲームのリフレッシュによってワイプされないように、重複するキャンバスでこれを行う必要があると思います。

また、アニメーション フレームを透明な png にする予定なので、その背後にあるものも見ることができます。煙のアニメーションだと思います。

1 秒待つ、間隔を設定する、またはタイムアウトを設定する最良の方法は何ですか? メインのキャンバス レイヤーで既に set animframerate を使用しています

画面へのペイントは手続き型であるため、何かをアニメーション化するためにメソッドが呼び出されると、アニメーション化中に他のすべてが停止することが頭に浮かぶので、他のアニメーションが進行している間にアニメーション化する方法を知る必要があります。

4

1 に答える 1

1

別のキャンバスに描画することは、複数のレイヤーを持つ良い方法ですが、希望することを行う方法がいくつかあります。

  1. PNG 画像が事前に定義されている場合は、 を使用してキャンバスに直接レンダリングできますcontext.drawImage()。透明度は維持されます。画像がレンダリングされる前にページに読み込まれる限り、フレームごとに再レンダリングするオーバーヘッドはほとんどありません。
  2. 非表示のキャンバスに描画してから、そのキャンバスをメイン キャンバスに描画できます。これを行うには、JavaScript でキャンバスを作成し、それをページに書き込まないようにします。例:var layer = document.createElement('canvas');そして、パラメータとしてcontext.drawImage()を呼び出します。これを簡単にするために使用できるLayer クラスの実装を作成しました。layerimage
  3. globalAlphaグラフィックス コンテキスト オブジェクトのプロパティを設定することにより、透明度を使用してメイン キャンバスに直接描画できます。(透明なものを描き終わったら、忘れずに 1 に戻してください。)
  4. プライマリ キャンバスの上に完全に配置された、目に見えるセカンダリ キャンバスに描画できます。これを行うbackground-colorには、セカンダリ キャンバスの CSS をに設定する必要がありますtransparent。

同様に、1 秒待つには 2 つの良い方法があります。

  1. setTimeoutまたはを使用しsetIntervalます。これは、可能な限り遅延期間 (この場合は 1 秒) に近い状態で待機し、コールバックを非同期的に実行します。setTimeout何かを 1 回だけ実行しsetIntervalたい場合や、定義済みの間隔で無期限 (つまり毎秒) に何かを実行したい場合に使用します。

  2. 実行する関数を最後に実行した時間を保持する変数を保持し、コードを再度実行する前に十分な時間待機したかどうかを確認します。これにより、コードが同期的に実行されます。例えば：

    // Outside of your animation loop
var lastRun = Date.now();
// Inside your animation loop
if (lastRun + 1000 < Date.now()) {
    /* Run you callback code */
}

    を使用requestAnimationFrameしてメインのアニメーション ループを実行しているため、これは遅延 (たとえば 1 秒) 後、ブラウザーが新しいフレームを描画する準備ができる最も早い時間に実行されます。このメソッドを使用するコードを非同期で実行する場合は、web workerも使用できることに注意してください。

テキストをキャッシュせずにキャンバスに描画したり、何千ものオブジェクトをキャンバスに描画したりしない限り、パフォーマンスがドローバウンドではない可能性が非常に高いため、非同期でなくても最も単純なソリューションを選択します。stats.jsライブラリを使用して、キャンバスのパフォーマンスをテストできます。

于 2013-07-04T21:06:36.137 に答える