非常基本的EaseLJS問題。我無法得到它的工作

我對JavaScript和EaseLJS很新，但我不明白這是如何工作的。我有一個HTML文件：非常基本的EaseLJS問題。我無法得到它的工作

<!DOCTYPE html> 
<html> 
<head> 

    <script src="easeljs-0.7.1.min.js" type="text/javascript"></script> 
<script src="game.s.js" type="text/javascript"></script> 
<script> 
function init() { 
     renderLevel(); 
    } 
</script> 

</head> 
<body onLoad="init();"> 
     <canvas id="canvas" width="500" height="300"> 
     alternate content 
</canvas> 
</body> 
</html>

的game.s.js文件看起來像：

function renderLevel() 
{ 

    var stage = new createjs.Stage("canvas"); 
    var bitmap = new createjs.Bitmap("brick.png"); 
    stage.addChild(bitmap); 

    bitmap.x = 32; 
    bitmap.y = 32; 
    stage.update(); 
    alert(stage.canvas); 
    alert(bitmap.name); 

}

我只是把那裏檢查值警報。 stage.canvas正確地指向HTML5Canvas元素，但圖像不會顯示！

我在這裏錯過了什麼？ :)

謝謝

來源

2014-07-05 secret_cinema

的問題是，您要添加的圖像階段，加載之前，那麼就沒有照片呢。在將其添加到舞臺之前，您需要等待圖像加載。

您可以使用preload();函數在調用init();或renderLevel();之前加載所有圖像。下面是這個功能應該是什麼樣子：

function preload(images, callback) { var count = images.length; if (count === 0) { callback(); } var loaded = 0; $(images).each(function() { $('<img>').attr('src', this).load(function() { loaded++; if (loaded === count) { callback(); } }); }); }

...然後你可以使用它像這樣：

preload(["image1.png", "image2.png"], init());

來源

2014-07-06 02:25:03

非常基本的EaseLJS問題。我無法得到它的工作

回答

相關問題