0

Canvas でアニメーションを操作しているときに、予期していなかったことに気付きました。画面の下から上にループで移動する、サイズの異なる 5 つの画像のかなり簡単なアニメーションがあります。

すべての画像データを配列に入れて、ループを介してキャンバスにwindow.requestAnimationFrame描画し、次のフレームで新しい描画を行うために使用します。

ここが興味深い部分です。最初は、 を使用してレンダリングされた各フレームのキャンバスをクリアしましたcontext.clearRect(0, 0, canvas.width, canvas.height);。次に、画面の一部だけが実際に変更されたとしても、レンダリングごとにキャンバス全体をクリアするのは計算の無駄だと思いました。

そのため、次のようなものを使用して、キャンバスをクリアする部分を書き直して、古い画像描画の痕跡のみをクリアしました。

for (var key in _images) {
   context.clearRect(_images[key].x-1, _images[key].y+_images[key].height, _images[key].width+2, 5);
}

しかし、あまりにも驚いたことに、これは遅いようです...最初はフレームレートが 49-60 で、その後は 47-57 でした。理由はありますか？これを最適化する他の方法はありますか？

4

2 に答える 2

0

人々がコメントで答えてくれたので、彼らが私の質問をカバーしてくれたと感じています. ここに要約があります：

それぞれclearRect()にかかる時間はほぼ同じなので、多くするよりも少ない方がよいでしょう。

最適化するには、100% ではないにしても、クリアする必要がある領域を計算し、それをクリアする必要があります。

于 2013-09-11T06:55:06.103 に答える