HTML5/JS 大量隐藏画布

Question

我想渲染一个大的随机世界（大小为 1600x24000 像素）并将其绘制到屏幕上。重点不是让我一次看到整个地图，所以即使大部分图像都离开了屏幕，这也是非常滞后的。我的想法是将世界分成 24 个不同的隐藏画布，每个画布的大小为 1600x1000。这些将在应用程序加载并保存到隐藏画布时生成。一次只绘制一个

请记住，这是使用 ctx 图形随机生成的图像，而不是静态图像。我还没有尝试过。 我应该期待什么？这有效率吗？我怎样才能做得更好？

我想补充一点，我目前处理这个问题的方式是只绘制每一帧的可见部分。但是，一次屏幕上通常有 80-120 张图像，并且必须实时渲染所有这些图像在移动设备上会变得相当滞后。我希望预渲染一大块并将其绘制为单个图像会加快速度。

Answer 1

通过将图块组合成预渲染图像，您可能会在移动设备上获得性能。

当然，您的游戏地图也有可能太大而无法在移动设备上进行响应式渲染。因此，您需要进行性能测试。

这是供您测试和试验性能的代码：http://jsfiddle.net/m1erickson/Lgcot78L/

它创建 24 张 1000 宽 x 600 高的图像。

这些图像使用负 X 偏移在 360 像素宽的画布上平移。

必要时，画布上会绘制 2 张图像。当左侧图像的宽度不足以覆盖整个画布时，就会发生这种情况。然后依次绘制下一张图像来填补空白。

这是代码的核心——在画布上绘制图像的 draw() 函数：

function draw(){

    // calc which of the 24 images goes on the left side
    var index=parseInt(offsetX/imgWidth);

    // calc how far left to offset that image
    var drawOffsetX=index*imgWidth-offsetX;

    // draw the image at that offset
    ctx.drawImage(canvases[index],drawOffsetX,0);  

    // if the left image doesn't cover the whole canvas
    // then draw the next image to fill the gap
    if(drawOffsetX<(canvasWidth-imgWidth)){
        index++;
        drawOffsetX+=imgWidth;
        ctx.drawImage(canvases[index],drawOffsetX,0)
    }
}