使用JavaScript while循环将图像数组绘制到HTML5画布上
我有以下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，然后在控制台中显示assetsImageArray中的图像数量。然后开始while循环--当arrayIteration变量小于assetsImageArray中的项目数时，位置arrayIteration (即此时位置为0)的图像应该绘制到坐标imageX和imageY的画布上。
imageX和imageY变量都持有由代码Math.floor(Math.random()*100);分配给它们的随机数字，在将第一个图像绘制到指定位置的画布上之后，控制台应该记录刚刚绘制的数组元素。
接下来的一行应该增加arrayIteration变量，然后通过从数组imagePositionsX和imagePositionsY分别获取一个随机元素的值来更新imageX和imageY的值。
while循环将遍历这段代码，将每个图像从assetsImageArray绘制到画布上的一个新位置，直到绘制完数组中的所有图像。
但是，出于某种原因，只有我的assetsImageArray中的第一个和最后一个图像被绘制到画布上。它们是在随机位置绘制的--这正是我想要的，每次我重新加载页面时，它们都会被绘制到画布上的新位置，但我不知道为什么在第一和最后一次之间的数组位置中没有一幅图像被绘制到画布上。我想我的逻辑哪里有问题，但不知道在哪里。
有人能认出它吗？
回答 1
Stack Overflow用户
发布于 2012-11-23 11:23:09
在循环的每一次迭代中，下一个图像都是在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之间的随机位置开始，而所有其他图像都使用从这两个数组中随机选择的坐标，所以我删除了这个差异。
https://stackoverflow.com/questions/13527453
复制相似问题
腾讯云开发者
