javascript - 使用 JavaScript while 循环将图像数组绘制到 HTML5 canvas

Question

我有以下 JavaScript 代码，我用它来尝试循环遍历图像数组，并将每个图像绘制到 HTML5 Canvas 的不同位置:

/*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，然后我在控制台中显示 assetsImageArray 中的图像数量。 然后 while 循环开始——当 arrayIteration 变量小于 assetsImageArray 中的项目数时，assetsImageArray 位置 arrayIteration(即此时位置 0)的图像应该绘制到 Canvas 的坐标 imageX 和 imageY 处。

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

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

while 循环将遍历此代码，将每个图像从 assetsImageArray 绘制到 Canvas 上的新位置，直到绘制完数组中的所有图像。

但是，出于某种原因，只有我的 assetsImageArray 中的第一张和最后一张图像被绘制到 Canvas 上。它们被绘制在随机位置——这正是我想要的，每次我重新加载页面时，它们都会被绘制到 Canvas 上的新位置，但我不明白为什么数组中的图像都没有位于第一个位置之间最后一个被绘制到 Canvas 上。我假设我的逻辑某处有问题，但无法弄清楚哪里。

有人能发现吗？

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 之间的随机位置开始，而所有其他图像使用从两个数组中随机选择的坐标，所以我删除了这个区别。