HTML5画布使用for循环清除和重绘

Question

I'm playing around with JS and found a small HTML5 game tutorial that I thought would be cool to modify. (This is the outcome: http://www.lostdecadegames.com/demos...e_canvas_game/ )

So I modified it just a little bit, letting for loop draw the background. The drawing itself succeed, but something is wrong with it. I found out that I must clear the canvas and redraw everything to each frame. I did it like this:

ctx.clearRect(0,0,canvas.width,canvas.height);

The outcome was that the clearing happened before the loop finished drawing the images.

The cycle is:

• clear canvas
• for loop drawing the background tiles
• draw something else

Somehow it doesn't output the background tiles...

I included my modifications here: http://jsfiddle.net/swenn/6mWkU/

What might be the problem?

Answer 1

I found the problem with your code, you aren't setting your tileY variable back to zero after drawing the floor. This causes the canvas to draw it further and further down, eg not in the viewspace of the canvas.

//Start of your render function.
tileY = 0;
tileX = 0;

Working version, webkit

As I wrote in my comment, you should requestAnimationFrame to schedule your drawing.

You might also want to look into a better way of drawing the floor, maybe making one larger texture and drawing it one time only instead of in a for loop.

EDIT: Fixed the jsfiddle link to actually be the updated version.