Question

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

我在这里缺少什么？：）

谢谢

Answer 1

问题是你要将图像添加到之前加载阶段，然后还没有图像。在将图像添加到舞台之前，您需要等待图像加载。

您可以在调用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());

非常基本的EaseLJS问题。我无法让它发挥作用

1 个答案: