javascript - HTML5/JS大量隐藏 Canvas

Question

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

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

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

Answer 1

通过将图 block 组合到预渲染图像中，您可能会在移动设备上获得性能提升。

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

以下代码供您测试和实验性能:http://jsfiddle.net/m1erickson/Lgcot78L/

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

这些图像通过使用负 X 偏移在 360 像素宽的 Canvas 上平移。

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

这是代码的核心——在 Canvas 上绘制图像的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)
    }
}