1

drawBuffer 関数で、説明も修正もできない奇妙な動作を見つけたので、誰かが私を助けてくれるかどうか見てみましょう。

基本的に、この関数は、複数の画像を含む画像からバッファー キャンバスを描画します。ほとんどのブラウザーでは、これはおまじないのように機能し、1 ミリ秒未満でバッファー キャンバスを作成して塗りつぶします。しかし、IE9 では、初めてバッファ キャンバスに描画するときに、約 10 ミリ秒かかることがわかりました。それに、アプリケーションは 30 fps で実行する必要があるため、アプリケーションの速度が大幅に低下します。

私は、最初の描画だけがその膨大な 10 ミリ秒を要していることを証明しました。私のコードを実行すると、最初の呼び出しの直後に 2 番目の drawImage 呼び出しがあり、この 2 番目の drawImage 呼び出しは 0 ミリ秒で完了します。

UiElement.prototype.drawBuffer = function () {

if(!this.bufferCanvas || !this.bufferContext) {
    this.bufferCanvas = document.createElement('canvas');
    this.bufferCanvas.width = this.sprite.getWidth();
    this.bufferCanvas.height = this.sprite.getHeight();
    this.bufferContext = this.bufferCanvas.getContext('2d');
} else {
    this.bufferContext.clearRect(0, 0, this.bufferCanvas.width, this.bufferCanvas.height);
}

var image = this.sprite.getImage();
var startx = this.sprite.getStartX(this.spriteFrame);
var starty = this.sprite.getStartY(this.spriteFrame);

var width = this.sprite.getWidth();
var height = this.sprite.getHeight();

this.bufferContext.clearRect(0, 0, this.bufferCanvas.width, this.bufferCanvas.height);
this.bufferContext.drawImage(
            image,
            startx,
            starty,
            width,
            height,
            0,
            0,
            width,
            height
        );

// 2nd draw is here only for debug purposes 

this.bufferContext.drawImage(
            image,
            startx,
            starty,
            width,
            height,
            0,
            0,
            width,
            height
        );}

要約すると、キャンバスを作成する - 0ms

1 回目の drawImage - 10ms (WTH?)

2 番目の drawImage - 0ms

キャンバスの g スポットを刺激して、その拳のイメージをより速く描けるようにする方法はありますか?

4

1 に答える 1

0

私も同じ問題に遭遇しました。

画像が十分に頻繁に使用されていない場合、IE は画像をリロードする必要があるようです...画像を DOM に添付したままにして、それが役立つかどうかを確認します。

于 2012-02-03T22:15:03.063 に答える