javascript - 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 将在 numbers[0] 中，2.png 在 numbers[1] 中，等等）

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

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

4. 然后将变量 fileName 的值加 1，给它一个值 '2'

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

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

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