JavaScript迭代

我想使用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 */
            }

函数drawLevelOneElements（）{
/*首先，清理画布*/
clearRect（0,0，myGameCanvas.width，myGameCanvas.height）；
/*此行清除先前在画布上绘制的所有元素*/
/*然后重新绘制游戏元素*/
drawGameElements（）；
/*绘制level 1所需的元素（26/04/2012）*/
var fileName=1；
var imagePositionX=20；
var imagePositionY=30；
while（文件名<11）{
/*在这里创建一个图像数组，在每次迭代中移动到数组的下一个元素*/
变量编号=新数组（）；
数字[0]=“1.png”
数字[1]=“2.png”
数字[3]=“3.png”
数字[4]=“4.png”
数字[5]=“5.png”
image.src=fileName+“.png”；
image.src=数字[0]；
image.onload=函数（）{
上下文.drawImage（image，imagePositionX，imagePositionY，50,50）；
}
fileName=fileName+1；
imageY=imageY+20；
console.dir（文件名）；/*显示在控制台中-有助于调试*/
}

我希望这个函数能起到什么作用：

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

然后，它将获取全局变量“image”，并将其源分配给数字[0]的内容

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

然后将变量fileName的值增加1，使其值为“2”

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

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

当变量“fileName”的值小于11时，它应该继续这样做，即它应该在最后绘制的图像下方绘制10个新图像

然而，由于某些原因，我的函数只绘制了第一个图像。有人能指出我做错了什么，以及我如何纠正这个错误吗

---

非常感谢。

如果你把drawImg的东西放到它自己的函数中，你可以把它清理一下：）现在我们已经把异步的东西从循环中拉了出来，所以每次你循环时，

图像

变量不会写得太多。你现在也在为循环使用

，这对我来说更清楚

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

编辑并注释了代码中的一些要点。
最有效的更改是在
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 */
        }

函数drawLevelOneElements（）{
/*首先，清理画布*/
clearRect（0,0，myGameCanvas.width，myGameCanvas.height）；
/*此行清除先前在画布上绘制的所有元素*/
/*然后重新绘制游戏元素*/
drawGameElements（）；
/*绘制level 1所需的元素（26/04/2012）*/
var fileName=1；
var imagePositionX=20；
var imagePositionY=30；
while（文件名<11）{
/*在这里创建一个图像数组，在每次迭代中移动到数组的下一个元素*/
变量编号=新数组（）；
/*未使用的内容是不必要的：）
数字[0]=“1.png”
数字[1]=“2.png”
数字[3]=“3.png”
数字[4]=“4.png”
数字[5]=“5.png”*/
image.src=fileName+“.png”；
//image.src=数字[0]；
image.onload=函数（）{
上下文.drawImage（image，imagePositionX，imagePositionY，50,50）；
}
fileName=fileName+1；
imagePositionY=imagePositionY+20；//之前：imageY=imageY+20；
console.dir（文件名）；/*显示在控制台中-有助于调试*/
}
提示：
image
在每次迭代中都会被覆盖。在
onload
事件中，
image
预计不会更改。提示2：使用闭包。图像位置似乎永远不会更改，但@RobW是对的，图像的值每次都会被重写。在循环中执行异步操作每次都会杀死你：）也是这样对于a）当
var numbers=[]
足够时创建这样的数组对象，b）手动定义数字，当可以使用
i+“.png”
或其他工具时，似乎是多余的。只是一些想法。