图像未显示在画布上

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 x576。我打算像背景一样向左滑动并在结束时自行重复。

所以我的问题是，为什么图像不显示在画布上。

我对此很陌生，如果我问这样一个简单的问题，对不起。

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; 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 -method，否则该行将只是对update函数的列出引用。

stage.update();

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

Answer 3

目前，我在EaselJS中遇到相同的问题。 尽管它可能对您有用，但是您可以尝试添加一个自动收录器，该自动收录器将自动更新画布：

createjs.Ticker.addListener(stage);

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

我也一直为此挠头。

图像未显示在画布上

问题描述

3 个解决方案

解决方案1
2 2013-01-14 18:42:14

解决方案2
0 2013-01-15 06:56:25

解决方案3
0 2013-01-15 19:59:37

图像未显示在画布上

问题描述

3 个解决方案

解决方案1 2 2013-01-14 18:42:14

解决方案2 0 2013-01-15 06:56:25

解决方案3 0 2013-01-15 19:59:37

解决方案1
2 2013-01-14 18:42:14

解决方案2
0 2013-01-15 06:56:25

解决方案3
0 2013-01-15 19:59:37