javascript - 移动视口而不重绘

Question

为了提高代码性能，我试图避免在视图在屏幕上平移时重绘视口内的每个对象。我的解决方案是使用 getImageData() 和 putImageData() 方法来移动已经绘制的内容。喜欢重绘一切的欲望，然而，帧率从 1,000 下降到 23。我绝对不想做的是将游戏“窗口”强制降低到 25 个游戏内方块。有没有更快的方法来做到这一点？

function ViewPort() {
    .
    .
    .
    this.ReconcileViewPort = function() {
        .
        .
        .
        if (!(this.previousCenter.x == this.center.x && this.previousCenter.y == this.center.y)) {
            // shift the images on the canvases
            var data = canvasLayer0.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer0.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer1.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer1.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer2.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer2.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            data = canvasLayer3.getImageData(0, 0, canvasRaw.width, canvasRaw.height - this.bottomRibbonHeight);
            canvasLayer3.putImageData(data, this.previousCenter.x - this.center.x, this.previousCenter.y - this.center.y);

            // get ready to detect any movements
            this.previousCenter.x = this.center.x;
            this.previousCenter.y = this.center.y;
        }
    }
}