Question

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

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

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

Answer 1

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

当然，您的游戏地图可能太大而无法在移动设备上呈现。因此，您需要进行性能测试。

以下是您要测试的代码。实验性能：http://jsfiddle.net/m1erickson/Lgcot78L/

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

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

必要时，画布上会绘制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)
    }
}

HTML5 / JS大量隐藏的画布

1 个答案: