移动视口而不重绘

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