4

大きな画像を含む webkit (chrome/safari) と Canvas に問題があります。

私の顧客のために、キャンバス上でフレームごとに 80 ミリ秒で画像が変化するアニメーションのイントロ ムービーを作成する必要がありました。

130 個のフレームがあり、単一の画像を 4 つのスプライトに配置して、ページの単一要求の負荷を軽減する必要がありました。

各スプライトのサイズは約 2.5MB で、必要なフレームの一部をスライスするだけです。ここまでは可能です。

多くのコードであなたを悩ませたくありません。しかし、最終的には次のことだけです。

this.$context.drawImage(img, 0, top, img.width-1 ,(img.height / sequenceCount)-1, 0, 0, this.$canvas.width, this.$canvas.height);

witch は 80 ミリ秒のタイムアウト内に呼び出されます。

私たちはそれを行い、すべての主要なブラウザーで動作します。しかし、webkit を使用すると、次のスプライトが変更されるたびに約 400 ミリ秒のハード ラグが発生します。

同じ問題が IE9 にもありましたが、最初にすべてのスプライトを 1 回描画することで修正できました。

   if (Browser.ie9) {
       for(var x = 0; x < this.sequence[0].sprites.length; x++){                
           this.draw(this.sequence[0].sprites[x].obj, 0, 1); 
       }                   
       this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
   }

( draw 関数には、前の例の drawImage 関数だけが含まれます。)

しかし、Webkit ブラウザーを使用すると、まだ 400 ミリ秒程度の遅延が発生します。

はい、画像はプリロードされています。したがって、これは問題ではありません。

これが何であるかについてのアイデアはありますか？

ご協力いただきありがとうございます！

4

1 に答える 1

1

キャンバスまたは画像の幅を取得するたびに、DOM にアクセスしているため、一般的に JS メモリにアクセスするよりも低速です。サイズ変更時にこれらの値を保存し、代わりに保存された値を使用すると、改善が見られる場合があります。

var canvasWidth, canvasHeight, imgWidth, imgHeight;
于 2012-05-11T18:01:28.207 に答える