1

我在我的 drawBuffer 函数中发现了我无法解释或修复的奇怪行为，所以让我们看看是否有人可以帮助我。

基本上，此函数从包含多个图像的图像中绘制缓冲区画布。在大多数浏览器中，这就像一个魅力，并在不到一毫秒的时间内创建 + 填充缓冲区画布。但是对于 IE9，我发现第一次绘制到缓冲画布时，大约需要 10 毫秒。有了这个，它真的减慢了我的应用程序，因为它应该以 30 fps 运行。

我已经证明只有第一次抽奖需要 10 毫秒。如果你浏览我的代码，你会注意到我在第一个之后有第二个 drawImage 调用，而第二个 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

第一次drawImage - 10ms（WTH？）

第二次drawImage - 0ms

有什么方法可以刺激画布的g点，让她让我更快地在那里画出拳头图像？

4

1 回答 1

0

我也遇到了同样的问题。

如果图像使用得不够频繁，似乎 IE 必须重新加载图像……我将尝试将图像保留在 DOM 上，看看是否有帮助。

于 2012-02-03T22:15:03.063 回答