HTML5：將一個畫布復制到另一畫布非常慢

Question

我已經編寫了一個HTML5游戲，該游戲使用固定大小的不可見畫布（“ MAINCanvas”）繪制每個框架。 然后，在requestAnimationFrame回調中，將該畫布的內容復制到另一個與屏幕大小相同的可見畫布中，如下所示：

DISPLAYCanvas.context = DISPLAYCanvas.getContext("2d", { alpha: false } );

function requestAnimationFrameCallback() {
  var canvas = MAINCanvas;
  // Some code here
  var destContext = DISPLAYCanvas.context;
  destContext.drawImage( canvas, 0, 0, window.innerWidth, window.innerHeight );
}

我跟蹤每秒調用一次requestAnimationFrame回調的頻率，因為這使我獲得了游戲的FPS。

當我用Cordova編譯游戲並運行游戲時，我得到大約20FPS。 但是，如果我從回調中刪除此行：

destContext.drawImage( canvas, 0, 0, window.innerWidth, window.innerHeight );

我得到60 FPS。 因此，顯然，drawImage是導致速度大幅下降的原因...有什么方法可以加快速度嗎？

Answer 1

您應該使用從GetContext（）獲得的上下文進行繪制，然后將其存儲以供繪制循環使用。 避免在任何循環中弄亂DOM，提前進行所有分配。

var destContext = DISPLAYCanvas.getContext("2d", { alpha: false } );
var w = window.innerWidth;
var h = window.innerHeight;
var canvas = MAINCanvas;

function requestAnimationFrameCallback() {
  // Some code here
  destContext.drawImage( canvas, 0, 0, w, h );
}