javascript - JavaScript と Canvas によるアニメーション

Question

canvas で簡単なアニメーションを作成できます。しかし、ペイントする前にすべてのフレームをきれいにする必要があり、ペイントが遅くなります (fps ~ 15) 2 つのキャンバスを使用しようとしましたが、成功しません。fpsを上げる方法を知っていますか？バッファリングを使用できますか? そしてどうやって？

Answer 1

大量の画像を描画している場合は、キャンバス要素に画像を描画し、画像の代わりにそれを保存することで、パフォーマンスを大幅に向上させることができます。canvas 要素を別の canvas 要素に描画すると、画像を描画するよりもはるかに高速です。

Answer 2

1920x1200の画面を使用しているため、キャンバスがクリアする必要のあるピクセル数が膨大であるため、この問題を以前にも経験しました。ブラウザがソフトウェアレンダリングを使用している場合にのみ、GPUで問題が発生しないため、実際に問題になります。

（私の前に他の人が言ったように）あなたができることの1つは、キャンバスの一部だけをクリアすることです。

もう1つできることは、ユーザーがブラウザのハードウェアアクセラレーションをオンにしていることを確認することです。Windowsでは、Chromeのabout：flagsでハードウェアアクセラレーションを有効にするようにユーザーに指示できます。IE9はデフォルトでそれをオンにしていて、本当に良い仕事をします。FirefoxでもデフォルトでDirect2Dアクセラレーションがオンになっていると思います。

Chromeのように、ユーザーが手動で設定する必要がある場合は、アプリの実行中にフレームレートを測定し、速度が非常に遅い場合は、ブラウザでハードウェアアクセラレーションが有効になっていることを確認するためのテキストを表示します。

Answer 3

いいえ、フレームごとにクリーニングする必要があります。しかし、TJHeuvel が指摘したように、フレームごとにキャンバスをクリアするという単純な行為は、パフォーマンスに影響を与えるべきではありません。問題はおそらく、コンテンツ変数を更新するロジックにあり、キャンバスの描画を更新するときに何のアクションも起こさないオブジェクトをループしている可能性があります。

Answer 4

それは、アニメーションの描画方法に大きく依存します。キャンバス ピクセル データ配列の操作は、JS での配列トラバーサルがネイティブ GPU アクセラレーション レンダリングよりも遅いため、非常に遅くなる可能性があります。キャンバス全体をクリアするのではなく、再描画が必要なキャンバスの部分だけを分離するのに役立ちますが、すでにご存知かもしれません。