我在我的 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点,让她让我更快地在那里画出拳头图像?