使用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之間的隨機位置開始，而所有其他圖像都使用從兩個數組中隨機選擇的坐標，因此我刪除了此差異。