アドビのHTML5 Canvas問題は、Google Chromeのみでアニメーション化されています。アニメーションが遅れている

Question

Adob​​e AnimateからHTML5 Canvasを公開しました。また、ファイルサイズを2MB未満に縮小し、すべてのブラウザで3秒未満で読み込みます。しかし、GoogleではChromeでフレーム（FPS）の遅れが発生しています。

ChromeのFlagsで2Dキャンバスのクロムアクセラレータを無効にしましたが、アニメーションをより大きな画面サイズでスムーズに実行することに問題があります。

アニメーションにキャンバスを公開する方法はありますか？これは起こりません。または、Chromeが正しいFPSでアニメーションを読み込めるようにするJavaScriptコードがありますか？

私たちはIE、Edge、FFでテストしており、これらのブラウザはすべてスムーズに動作します。この問題が発生しているのはGoogle Chromeだけです。

Answer 1

これをプロファイリングすると、コードがdrawImageを多数呼び出すことがわかりました。私のマシンでは、その時間の86％をdrawImageの呼び出しで費やしました。

これは、フレームごとに大きな画像を再描画する可能性があります。これが起こらないようにする方法があるかどうかを確認してください。

背景画像を削除して、線だけを残すようにしてください。遅れが消えたら、答えがあります。

関連する可能性：

Why does chrome struggle to display lots of images on a canvas when the other browsers don't?