非常基本的 EaseLJS 问题。我无法让它工作答案

【问题标题】：Very basic EaseLJS issue. I can't get it to work非常基本的 EaseLJS 问题。我无法让它工作
【发布时间】：2014-08-26 12:38:46
【问题描述】：

我对 javascript 和 EaseLJS 非常陌生，但我不明白这是如何工作的。我有一个 html 文件：

   <!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 元素，但图像不会显示！

我在这里缺少什么？ :)

谢谢

【问题讨论】：

标签： javascript html canvas easeljs stage

【解决方案1】：

问题是您将图像添加到舞台在加载之前，然后还没有图像。您需要等待图片加载后才能将其添加到舞台。

您可以通过在调用init(); 或renderLevel(); 之前使用preload(); 函数加载所有图像来做到这一点。这个函数应该是这样的：

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

【讨论】：