Question

我正在Web应用程序的VS2013中创建一个非常简单的应用程序。

HTML

<canvas id="sprite" height="400" width="300"></canvas>
    <script src="JS/TestGame.js"></script>

TestGame.js

    var imgPath = 'Icons/baby_bear.png';
    var bear1 = new createjs.Bitmap(imgPath);
    var bear2 = new createjs.Bitmap(imgPath);
    var bear3 = new createjs.Bitmap(imgPath);
    bear2.x = 200;
    bear3.x = 400;
    var stage = document.getElementById("sprite");
    stage.addChild(bear1, bear2, bear3);

我在chrome javascript控制台中收到以下错误

未捕获TypeError：undefined不是TestGame.js函数：10

更改

var imgPath = 'Icons/baby_bear.png';
var bear1 = new createjs.Bitmap(imgPath);
var bear2 = new createjs.Bitmap(imgPath);
var bear3 = new createjs.Bitmap(imgPath);
bear2.x = 200;
bear3.x = 400;
var stage = new createjs.Stage("sprite");
stage.addChild(bear1, bear2, bear3);
stage.update();

具有讽刺意味的是，现在javascript控制台没有抱怨什么，但我的熊没有显示出来？

Answer 1

没有显示任何内容的原因是您在请求图像后立即更新您的舞台，因此在绘制舞台时不会加载它们。

您需要：

使用Ticker不断更新舞台（如果你出于其他原因这样做，这只会很好）
侦听图像上的onload，然后更新舞台
在更新阶段之前，请确保已加载内容。例如，查看我们的PreloadJS。 http://preloadjs.com

以下是＃2的快速示例。如果您正在快速做某事，我只推荐这个。如果您构建更复杂的应用程序，则应考虑预加载内容。

var imgPath = 'Icons/baby_bear.png';
var image = new Image();
image.onload = draw;
image.src = imgPath;

function draw() {
    var bear1 = new createjs.Bitmap(image);
    var bear2 = new createjs.Bitmap(image);
    var bear3 = new createjs.Bitmap(image);
    bear2.x = 200;
    bear3.x = 400;
    var stage = new createjs.Stage("sprite");
    stage.addChild(bear1, bear2, bear3);
    stage.update();
}

请注意，我还更改了其他内容：第一个是使用相同的图像引用，而不是将字符串路径传递给所有3.通过传递字符串，为后台中的每个实例创建图像，而不是共享引用，这将更好地用于内存和性能原因。

最后一点需要注意的是，您可以更改示例以立即设置所有内容，并且只在图片加载时调用stage.update()：

var imgPath = 'Icons/baby_bear.png';
var image = new Image();
image.onload = draw;
image.src = imgPath;

var bear1 = new createjs.Bitmap(image);
var bear2 = new createjs.Bitmap(image);
var bear3 = new createjs.Bitmap(image);
bear2.x = 200;
bear3.x = 400;
var stage = new createjs.Stage("sprite");
stage.addChild(bear1, bear2, bear3);

function draw() {
    stage.update();
}

干杯。

Answer 2

addChild方法实际上可以处理多个参数。详情请见http://www.createjs.com/Docs/EaselJS/files/easeljs_display_Container.js.html#l161

我认为您最好检查一下是否包含了CreateJS库

Answer 3

我的第一个倾向是说document.getElementById（＆＃34; sprite＆＃34;）没有找到元素，所以结果是未定义的。由于undefined不是一个对象，你的下一行会给你这个错误。试试这个......

...
var stage = document.getElementById("sprite");
if(!stage){
    alert("canvas not found")
}

stage.addChild(bear1, bear2, bear3);

Answer 4

我相信您的问题是您尝试使用单个addChild方法添加3个子项，并且它只需要1个参数。可能不存在具有3个参数的addChild的定义。你可能想尝试将这一行分成3行，如下所示：

stage.addChild(bear1);
stage.addChild(bear2);
stage.addChild(bear3);

EaselJS：undefined不是函数吗？

4 个答案: