第一次drawImage對新畫布的調用在IE9上很慢

我在我的drawBuffer函數中發現了一個奇怪的行爲，我無法解釋或修復，所以讓我們看看是否有人能幫助我。第一次drawImage對新畫布的調用在IE9上很慢

基本上這個函數從包含多個圖像的圖像中繪製緩衝區畫布。在大多數瀏覽器中，它的作用就像一個魅力，並在不到一毫秒的時間內創建+填充緩衝區畫布。但是對於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 
     );}

所以總結起來：創建帆布 - 0毫秒

1日的drawImage - 10毫秒（WTH？）

第二個drawImage - 0毫秒

有什麼辦法來刺激畫布g點，讓她能更快地在那裏畫出拳頭形象？

來源

2011-11-16 Jussi

我也遇到了同樣的問題。

看起來像IE必須重新加載圖像，如果他們沒有經常使用足夠的話...我會嘗試離開圖像附加到DOM，看看是否有幫助。

來源

2012-02-03 22:15:03

第一次drawImage對新畫布的調用在IE9上很慢

回答

相關問題