Question

我编写了一个HTML5游戏，该游戏使用固定大小的不可见画布（“ MAINCanvas”）绘制每个帧。然后，在requestAnimationFrame回调中，将该画布的内容复制到另一个与屏幕大小相同的 visible 画布中，如下所示：

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 );
}

HTML5：将一个画布复制到另一画布非常慢

1 个答案: