javascript 在easeljs中添加一个简单的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20849897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 19:26:43 来源:igfitidea点击:
Adding a simple image in easeljs
提问by i maed dis
This is my htmlcode:
这是我的 html 代码：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
And this is my Doge.js code:
这是我的 Doge.js 代码：
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var doge = new Image();
doge.src = "images/doge.jpg"
var bitmap = new createjs.Bitmap(doge);
stage.addChild(bitmap);
stage.update();
}
Why it doesn't show anything on the screen? What is wrong?
为什么它在屏幕上不显示任何内容？怎么了？
回答by Lanny
The image is not loaded when the stage is updated. I posted an answer here:
更新舞台时不会加载图像。我在这里发布了一个答案：
? 画架不显示位图
- You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
- Listen for the onload of the image, and update the stage again
- Preload the image with something like PreloadJS before you draw it to the stage.
- 您可以向舞台添加 Ticker 以不断更新它（大多数应用程序都会这样做，因为随着时间的推移还有其他事情会发生变化）
- 监听图片的onload，再次更新stage
- 在将图像绘制到舞台之前，使用 PreloadJS 之类的东西预加载图像。
回答by jdeyrup
As stated above you cannot draw your image until you have loaded it. Try this:
如上所述，在加载图像之前，您无法绘制图像。试试这个：
<!DOCTYPE HTML>
<html>
<title>Easel Test</title>
<head>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<script>
var stage;
function init() {
stage = new createjs.Stage("myCanvas");
var image = new Image();
image.src = "path/image";
image.onload = handleImageLoad;
}
function handleImageLoad(event) {
var image = event.target;
var bitmap = new createjs.Bitmap(image);
stage.addChild(bitmap);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="960" height="580"></canvas>
</body>
</html>
