在畫布上畫一串圖像

我有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); 

}

來源

2013-07-03 user2535056

這是否在頁面加載時運行？您需要確保在將圖像繪製到畫布上之前加載圖像。 – Ceres

你可以發佈你的所有代碼嗎？ – stackErr

使您的問題可以回覆，您需要提供示例代碼。例如，你可以使用jsfiddle。你沒有提供任何信息。我的猜測是，你必須等待圖像完成加載，然後再繪製它們。 – akonsu

是否要更新x，y，position，並height？如果沒有，你可能會畫出圖像，這將使它看起來像一些沒有出現。但是，您應該發佈更多信息，例如顯示的圖像數量，用於繪製圖像的整個功能以及您的嘗試外觀的屏幕截圖。這樣，我們可以更有效地幫助您

來源

2013-07-03 13:59:29 taylorc93

對不起，我更新了 – user2535056

以上是不是一個答案。這是一個評論。 – akonsu

根據你如何更新它，我會說你的問題是，當你改變圖像時，你並沒有更新你的變量。對於每個圖像，您將具有'x = 0'，'y = 0'，'width = 10'和'height = 10'。你應該製作一個保存每個圖像座標的「圖像」對象，並在您循環訪問數組時參照它們。防爆。 'ctx.drawImage（img [i]，img [i] .x，img [i] .y，img [i] .width，img [i] .height）' – taylorc93

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

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); 
    } 
}

來源

2013-07-03 14:15:42 akonsu

我有一個onload函數，然後數組充滿了img.src – user2535056

好吧。抱歉。我沒有更多的想法。我需要看到代碼才能獲得更多的想法。 :) – akonsu

我在我的服務器上有一個錯誤，對不起傢伙。

來源

2013-07-03 15:29:50 user2535056

在畫布上畫一串圖像

回答

相關問題