在畫布上繪制一堆圖像

Question

我有8張大小為80 KB的圖像，我使用循環將它們繪制在畫布上。 有時並非全部都被繪制。 可能是什么原因？

ctx工作太多？

// img[] containing single image.src

var x = 0;
var y = 0;
var width = 10;
var height = 10;

for( var i = 0; i< 8 ; i++){

 ctx.drawImage(img[i], x + 10 * i, y + 10 * i, width, height);

}

Answer 1

您是否要更新x ， y ， position和height ？ 如果沒有，您可能正在繪制圖像，這會使圖像看起來好像沒有出現。 但是，您應該發布更多信息，例如顯示多少圖像，用來繪制圖像的整個功能以及嘗試畫面的屏幕快照。 這樣，我們可以更有效地幫助您

Answer 2

確保已加載圖像。 像這樣的東西（未經測試）：

var urls = [...];

for (var i = 0; i < urls.length; i++) {
    var image = new Image();

    image.src = urls[i];
    image.onload = function () {
        context.drawImage(this, ..., ..., this.width, this.height);
    }
}

Answer 3

抱歉，我的服務器上有一個錯誤。