JavaScript迭代

Question

我想使用JavaScript在HTML5画布上绘制一系列图像。 我有以下while循环，我曾希望将所有图像绘制到画布上，但是，它目前仅绘制第一个：

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 */
            }

讨论一下我希望此功能可以完成的工作：

1. 将每个图像加载到数组的不同元素中（因此1.png的数字为[0]，2.png的数字为[1]等）

2. 然后，它将使用全局变量“ image”，并将其来源分配给数字[0]的内容

3. 然后在画布上的指定位置绘制该图像。

4. 然后将变量fileName的值增加1，为其赋予值'2'

5. 接下来，它将通过在画布上绘制图像的Y坐标值增加20-将要绘制图像的位置向下移动20个像素

6. 之后，它将返回到循环的起点，并在画布上以比绘制的第一个图像的位置低20个像素的位置绘制下一个图像（2.png）。

7. 当变量'fileName'的值小于11时，它应继续执行此操作，即应在绘制的最后一个图像下方绘制每个新图像10张图像。

但是，由于某种原因，我的函数仅绘制第一张图像。 有人可以指出我做错了什么，我该如何纠正？

非常感谢。

Answer 1

如果您将drawImg东西放入它自己的函数中，则可以对其进行清理：)现在，我们将异步东西从循环中删除了，因此每次循环时image变量都不会被覆盖。 您现在也正在使用for循环，对我来说更容易理解。

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

编辑并注释了代码的一些要点。 最有效的更改是imageY = imageY+20; 被编辑为使用imagePositionY变量。

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 */
        }