导入我的图像

我想在开始我的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

导入我的图像

回答

相关问题