我正在 VS2013 中的 Web 应用程序中创建一个非常简单的应用程序。
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 控制台出现以下错误
Uncaught TypeError: undefined is not a function 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 控制台没有提示任何东西,但我的熊没有显示?
最佳答案
没有显示的原因是您在请求图像后立即更新舞台,因此在绘制舞台时不会加载它们。
您将需要:
- 使用 Ticker 不断更新舞台(只有当您出于其他原因这样做时才有用)
- 监听图像上的加载,并更新舞台
- 确保在更新舞台之前加载您的内容。例如检查我们的 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();
}
干杯。
关于javascript - EaselJS:undefined 不是函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26916532/