JavaScript迭代

Question

I want to use JavaScript to draw a series of images onto an HTML5 canvas. I have the following while loop, which I had hoped would draw all of the images to the canvas, however, it is currently only drawing the first one:

function drawLevelOneElements(){
            /*First, clear the canvas */
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */

            /*Then redraw the game elements */
            drawGameElements();

            /*Draw the elements needed for level 1 (26/04/2012) */
            var fileName = 1;
            var imagePositionX = 20;
            var imagePositionY = 30;
            while(fileName < 11){
                /*Create an array of images here, move to next element of array on each iteration */
                var numbers = new Array();
                numbers[0] = "1.png"
                numbers[1] = "2.png"
                numbers[3] = "3.png"
                numbers[4] = "4.png"
                numbers[5] = "5.png"
                image.src = fileName+".png";
                image.src = numbers[0];
                image.onload = function(){
                    context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
                }
                fileName = fileName+1;
                imageY = imageY+20;
                console.dir(fileName); /* displays in the console- helpful for debugging */
            }

To talk through what I had hoped this function would do:

1. Load each of the images into a different element of the array (so 1.png would be in numbers[0], 2.png in numbers[1], etc. )

2. It would then take the global variable 'image', and assign its source to the contents of numbers[0]

3. Then draw that image at the specified position on the canvas.

4. Then increment the value of the variable fileName by 1, giving it a value of '2'

5. Next it would increment the value of the Y co-ordinate where it will draw the image on the canvas by 20- moving the position of the image to be drawn down by 20 pixels

6. After that it would go back to the start of the loop and draw the next image (2.png) on the canvas in a position that is 20 pixels below the position of the first image that was drawn.

7. It should continue doing this while the value of the variable 'fileName' is less than 11, ie it should draw 10 images each new one below the last one that was drawn.

However, for some reason, my function only draws the first image. Could someone point out what I'm doing wrong, and how I could correct this?

Thanks very much.

Answer 1

If you take the drawImg stuff and shove it in its own function you can clean this up a bit :) Now we've yanked the async stuff out of the loop, so the image variable doesn't get over-written each time you loop. You're also using a for loop now, which to me is clearer to understand.

function drawLevelOneElements() {
  // your stuff
  for (var i = 0; i > 5; i++) {
    drawImg(ctx, i, x, y);
    // update x or y and whatever else
  }
}

// put all your image drawing stuff here
function drawImg(ctx, i, x, y) {
  var img = new Image();
  img.src = i + ".png";
  img.onload = function(){
    ctx.drawImage(img,  x, y, 50, 50);
  }
}

Answer 2

Edited and commented some points of your code. The most effective change was at imageY = imageY+20; that was edited to use imagePositionY variable.

function drawLevelOneElements() {
        /*First, clear the canvas */
        context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
        /*This line clears all of the elements that were previously drawn on the canvas. */

        /*Then redraw the game elements */
        drawGameElements();

        /*Draw the elements needed for level 1 (26/04/2012) */
        var fileName = 1;
        var imagePositionX = 20;
        var imagePositionY = 30;
        while(fileName < 11){
            /*Create an array of images here, move to next element of array on each iteration */
            var numbers = new Array();
            /* what is not used is not necessary :)
            numbers[0] = "1.png"
            numbers[1] = "2.png"
            numbers[3] = "3.png"
            numbers[4] = "4.png"
            numbers[5] = "5.png"*/
            image.src = fileName+".png";
            // image.src = numbers[0];
            image.onload = function(){
                context.drawImage(image, imagePositionX, imagePositionY, 50, 50);
            }
            fileName = fileName+1;
            imagePositionY = imagePositionY+20; //before: imageY = imageY+20;
            console.dir(fileName); /* displays in the console- helpful for debugging */
        }