HTML5 / JS大量隐藏的画布

Question

I want to render a large randomized world (1600x24000 pixels in size) and draw it onto the screen. The point is not for me to see the whole map at once though, so this is very laggy even when the majority of the image goes offscreen. I have the idea of splitting the world into 24 different hidden canvases, each 1600x1000 in size. These would be generated when the application is loaded and saved into a hidden canvas., where only one is drawn at a time

Remember that this is a randomly generated image using ctx graphics, not a static image. I have not yet been able to try it out. What should I expect? Is this efficient? How could I do it better?

I would like to add that the current way I am handling this is by drawing only the visible part each and every frame. However, there are usually 80-120 images onscreen at a time and having to render all these in real time can get rather laggy on mobile. I would hope that pre-rendering a large section and drawing it as a single image would speed things up.

Answer 1

You will probably gain performance on mobile devides by combining your tiles into pre-rendered images.

Of course, there is the possibility that your game map is simply too large to be rendered responsively on mobile devices. Therefore, you will need to do performance testing.

Here's code for you to test & experiment with performance: http://jsfiddle.net/m1erickson/Lgcot78L/

It creates 24 images of 1000 width x 600 height.

These images are panned across a 360px wide canvas by using a negative X offset.

When necessary, there are 2 images drawn on the canvas. This occurs when the lefthand image is not wide enough to cover the entire canvas. Then the next image in sequence is drawn to fill the gap.

This is the heart of the code--the draw() function that draws the image(s) on the canvas:

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