0 
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
</head>

<body>
<div id ="beeld">
<canvas id ="stageCanvas" width="1024" height="576">
<script src ="javascript.js"></script>
</canvas>
</div>

</body>
</html>

这是我的 HTML

//Javascript Document
var canvas = document.getElementById('stageCanvas');
var stage = new Stage(canvas);

var Background;
var imgBackground = new Image();
imgBackground.src ="images/bg.png";

Background = new Bitmap(imgBackground);
Background.x = 0
Background.y = 0
stage.addChild(Background);
stage.update();

这就是我的js。

图像是 1024 x 576，所以它应该是全屏的。原版是 2048 x 576。我打算像背景一样向左滑动并在结束时自行重复。

所以我的问题是，为什么图像没有出现在画布上。

我对此很陌生，所以如果我问这么简单的问题，我很抱歉。

PS：如果我检查 HTML，它不会显示任何错误，它会显示图像正在加载。它只是没有..绘制..我猜。我很沮丧，因为我已经被困在这里几个小时了。

我找到了一个工作代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Easel simple game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script>
var canvas;
var stage;
var bg;
var score;
var ghost;

function init() {
    canvas = document.getElementById("StageCanvas");
    stage = new Stage(canvas);
    score = 0;


    bg = new Image();
    bg.src = "img/bg.png";
    bg.onload = setBG;
}

function setBG(event){
    var bgrnd = new Bitmap(bg);
    stage.addChild(bgrnd);
    stage.update();
}


</script>
</head>

<body onload="init();">
    <canvas id="StageCanvas" width="1240" height="576"></canvas>
</body>
</html>

顺便说一句，这段代码是为别人工作的，所以我不相信。

这似乎完美无缺。但是一旦我删除 bg = new Image(); bg.src = "img/bg.png"; bg.onload = setBG; 它就会停止工作。

4

3 回答 3

2 
Background = new Bitmap(imgBackground);
于 2013-01-14T18:42:14.157 回答
0

我现在对 EaselJS 有同样的问题。虽然它可能对您有用，但您可以尝试添加一个自动更新画布的代码：

createjs.Ticker.addListener(stage);

添加后，我能够将图像绘制在画布上，但是一旦我向图像添加任何变换（比例、定位、高度、宽度），它们就不会在绘制图像之前应用。

我也一直在为此挠头。

于 2013-01-15T19:59:37.990 回答
0

在 HTML 中：尝试将您的脚本标签移动javascript.js到 . 之前</body>或至少不移动到<canvas>...</canvas>. 另一件事是： and和and
之间有一个空格，这可能会导致某些浏览器出现问题。src=id=

在 JavaScript 中：您需要执行update- 方法，()否则该行将只是对更新函数的列出引用。

stage.update();

我注意到的第二件事（虽然不是问题的一部分）：您使用的是 EaselJS 0.4.2，但 0.5.0 已经发布，以防万一您想保持最新状态：http:// code.createjs.com/easeljs-0.5.0.min.js ;-)

于 2013-01-15T06:56:25.210 回答