Question

<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乘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;它停止工作。

Answer 1

Background = new Bitmap(imgBackground);

Answer 2

在HTML中：尝试将javascript.js的脚本标记移至</body>之前或至少不移至<canvas>...</canvas>。
另一件事是：src和=以及id和=之间有空格，这可能会在某些浏览器中造成问题。

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

stage.update();

还有第二件事，我注意到了（虽然不是问题的一部分）：你正在使用EaselJS 0.4.2，但已经发布了0.5.0，以防你想要更新：{ {3}}; - ）

Answer 3

我目前与EaselJS有同样的问题。虽然它可能适合您，但您可以尝试添加一个自动更新画布的自动收报机：

createjs.Ticker.addListener(stage);

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

我也一直在摸不着头脑。

图像不会显示在画布上

3 个答案: