導入我的圖像

我想在開始我的HTML5遊戲之前導入我的所有來源「圖像essentialy」，但我不知道該怎麼做！我tryed這個代碼，但它不工作:(導入我的圖像

var canvas = document.getElementById('stage'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
canvas.style.background = 'url(img/tapis.jpg)'; 
var ctx = canvas.getContext('2d'); 

var carta = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png","img/a6.png","img/a7.png", 
      "img/a8.png","img/a9.png","img/a10.png", 
      "img/b1.png","img/b2.png","img/b3.png","img/b4.png","img/b5.png","img/b6.png","img/b7.png", 
      "img/b8.png","img/b9.png","img/b10.png", 
      "img/c1.png","img/c2.png","img/c3.png","img/c4.png","img/c5.png","img/c6.png","img/c7.png", 
      "img/c8.png","img/c9.png","img/c10.png", 
      "img/d1.png","img/d2.png","img/d3.png","img/d4.png","img/d5.png","img/d6.png","img/d7.png", 
      "img/d8.png","img/d9.png","img/d10.png"]; 

var n = carta.length; 
carta.forEach(function(srcu) { 
var img = new Image(); 
img.src = srcu; 
img.onload = function() { 
    --n || oplach(); 
} 
});

，這是oplach功能：？

function oplach(){ 
    var image = new Image(); 
    for(var i=0; i<carta.length; i++) 
    { 
     image.src= carta[i]; 
     ctx.drawImage(image,(i*40),50); 
    } 
}

它不工作的任何想法

來源

2012-07-09 Oussama Bouthouri

如果任巴特的答案，或者我的回答能夠幫助您將請標明它通過點擊打勾答案的一側接受？ – Undefined 2012-07-09 15:58:00

@OussamaBouthouri：你有沒有設法讓它工作？ – 2012-07-12 12:45:35

添加產生的img標籤的DOM像這樣

carta.forEach(function(srcu) { 
    var img = new Image(); 
    img.src = srcu; 
    img.onload = function() { --n || oplach(); } 

    // ADD THE FOLLOWING LINE TO YOUR CODE 
    document.documentElement.appendChild(img); 
});

來源

2012-07-09 15:05:57

創建一個隱藏的div並將所有的圖片添加到這個div裏面當你需要在裏面使用它們時你的遊戲，他們將被完全加載和緩存。

在你的foreach循環中是這樣的。

var img = document.createElement("img"); 
img.src = yoursrc; 
document.getElementById("hiddenelement").appendChild(img);

延伸閱讀

http://www.mediacollege.com/internet/javascript/image/preload.html

Preloading images with jQuery

來源

2012-07-09 15:07:43 Undefined

導入我的圖像

回答

相關問題