Question

我有一系列图片：

var images = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png'];

...我在for循环中随机选择一个：

for (var i = 1; i <= num; i++) {
    var randomNumber = randomIntFromInterval(0, (images.length-1));
    var randomImage = images[randomNumber];
}

然后我想将随机图像绘制到同一循环中的画布上：

for (var i = 1; i <= num; i++) {
    var randomNumber = randomIntFromInterval(0, (images.length-1));
    var randomImage = images[randomNumber];

    var img = new Image
    img.src = randomImage;
    ctx.drawImage(img, x, y, width, height);
}

...使用按钮：

<button type="button" onclick="drawImages();">Look!</button>

除了一个问题外，图像绘制正确。在第二次点击之前没有任何内容。

似乎必须在绘制图像之前加载图像，并且第一次单击似乎加载它们。但是我不希望在点击按钮之前绘制图像。我不太明白如何在同一次点击中加载和绘制图像。

在Foor循环中将图像从数组绘制到画布

0 个答案: