JavaScript 迭代答案

【问题标题】：JavaScript iterationJavaScript 迭代
【发布时间】：2012-04-27 03:35:51
【问题描述】：

我想使用 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.png 将在 numbers[0] 中，2.png 在 numbers[1] 中，等等）
然后它将获取全局变量 'image'，并将其源分配给 numbers[0] 的内容
然后在画布上的指定位置绘制该图像。
然后将变量fileName的值加1，给它一个值'2'
接下来它将增加 Y 坐标的值，它将在画布上绘制图像 20-将要绘制的图像的位置向下移动 20 个像素
之后，它会回到循环的开头并在画布上绘制下一个图像 (2.png)，位置比绘制的第一个图像的位置低 20 像素。
当变量 'fileName' 的值小于 11 时，它应该继续执行此操作，即它应该在最后一个绘制的图像下方绘制 10 个新图像。

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

非常感谢。

【问题讨论】：

提示：image 在每次迭代中都会被覆盖。在onload 事件中，image 预计不会改变。提示 2：使用闭包。
图像位置似乎永远不会改变，但@RobW 是正确的，图像的值每次都会被覆盖。在循环中做异步的东西每次都会杀了你:)
另外，a）创建一个像 var numbers = [] 就足够的数组对象和 b）手动定义数字，当它可以用 i + ".png" 或其他方式完成时，这似乎是多余的。只是一些想法。

标签： javascript while-loop html5-canvas

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你把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);
  }
}

【讨论】：