使用JavaScript while循环将图像数组绘制到HTML5画布

Question

我有以下JavaScript代码，用于尝试遍历一系列图像，并将每个图像绘制到HTML5画布的不同位置：

/*First, create variables for the x & y coordinates of the image that will be drawn.
                the x & y coordinates should hold random numbers, so that the images will be 
                drawn in random locations on the canvas.*/
                var imageX = Math.floor(Math.random()*100);
                var imageY = Math.floor(Math.random()*100);

                /*Create a 'table' of positions that the images will be drawn to */
                var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
                var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];
                var randomPositionX = Math.floor(Math.random()*10);
                var randomPositionY = Math.floor(Math.random()*10);

            /*Draw all images from assetsImageArray */
            /*Use a while loop to loop through the array, get each item and draw it. */
            var arrayIteration = 0;
            console.log('Assets Image Array length: ' + assetsImageArray.length); /*Display the length of the array in the console, to check it's holding the correct number of images. */
            while(arrayIteration < assetsImageArray.length){
                context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50);
                console.log(arrayIteration); /*Display the current array position that's being drawn */
                arrayIteration = arrayIteration+1;
                /*Now try changing the values of imageX & imageY so that the next image is drawn to a 
                    different location*/
                imageX = imagePositionsX[randomPositionX];  /* imageX+(Math.floor(Math.random()*100)); */
                imageY = imagePositionsY[randomPositionY];  /* imageY+(Math.floor(Math.random()*100));  */

            }

该代码背后的预期逻辑是：首先将arrayIteration变量设置为0，然后在控制台中显示我的assetImageArray中的图像数量。 然后while循环开始-当arrayIteration变量小于assetsImageArray中的项目数时，assetsImageArray的位置arrayIteration（即此时的位置0）处的图像应绘制到画布上的坐标imageX和imageY处。

imageX和imageY变量都保存由代码Math.floor(Math.random()*100);分配给它们的随机数Math.floor(Math.random()*100); 在指定位置将第一个图像绘制到画布后，控制台应记录刚绘制的数组元素。

然后，下一行应增加arrayIteration变量，最后，应分别从数组imagePositionsX和imagePositionsY中获取随机元素的值，以更新imageX和imageY的值。

while循环将遍历此代码，将assetsImageArray中的每个图像绘制到画布上的新位置，直到绘制了阵列中的所有图像为止。

但是，由于某种原因，只有我的assetImageArray中的第一张和最后一张图像被绘制到画布上。 它们被绘制在随机的位置上-这正是我想要的，并且每次我重新加载页面时，它们都被绘制到画布上的新位置，但是我不知道为什么为什么图像之间在第一个之间的位置都不存在最后被绘制到画布上。 我认为我的逻辑在某处出了点问题，但不知道在哪里。

有人能发现吗？

Answer 1

在循环的每次迭代中，将在imageX和imageY指定的坐标处绘制下一个图像，但是对于第二次及其后的迭代， imageX和imageY始终保持相同的值，因此第二个及其后的图像都在彼此之上绘制。同一个地方。 这就是为什么似乎只绘制了第一个和最后一个图像的原因。

在第一次迭代中，在循环开始之前，根据分配给imageX和imageY的值，以0到99之间的随机坐标绘制了第一张图像：

            var imageX = Math.floor(Math.random()*100);
            var imageY = Math.floor(Math.random()*100);

然后在循环中更改imageX和imageY ：

         imageX = imagePositionsX[randomPositionX];  
         imageY = imagePositionsY[randomPositionY];

但是randomPositionX和randomPositionY持有什么值？ 它们包含一个介于0到9之间的随机数，该随机数在循环开始之前分配一次 。 因此，这两行总是从imagePositionX和imagePositionsY数组中选择相同的位置。

最简单的解决方法是在循环内移动以下两行：

            var randomPositionX = Math.floor(Math.random()*10);
            var randomPositionY = Math.floor(Math.random()*10);

仍然有可能纯粹是偶然地有一个以上的图像最终出现在同一位置，但是使用10×10的网格的可能性较小（取决于您拥有多少个图像）。

我可能会简化代码，如下所示：

 var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
 var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];
 var i, x, y;

 for (i = 0; i < assetsImageArray.length; i++) {
     x = imagePositionsX[ Math.floor(Math.random()*10) ];
     y = imagePositionsY[ Math.floor(Math.random()*10) ];

     context.drawImage(assetsImageArray[i], x, y, 50, 50);
 }

我不明白为什么您的当前代码从第一个图像的坐标在0到99之间的随机位置开始，而所有其他图像都使用从两个数组中随机选择的坐标，因此我删除了此差异。