HTML5 / JS大量隱藏的畫布

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