图像不画布上

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

来源

2013-01-14 user1978133

Background = new Bitmap(imgBackground);

来源

2013-01-14 18:42:14 ic3b3rg

对不起，我误输了它。这就是我的实际情况。必须先改变它。 – user1978133

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

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

stage.update();

而第二件事，我注意到（尽管不是问题的一部分）：您正在使用EaselJS 0.4.2，但0.5.0已经发布了，万一你想成为先进-date：http://code.createjs.com/easeljs-0.5.0.min.js ;-)

来源

2013-01-15 06:56:25 olsn

Overseen the stage.update（）; 修正了它，它仍然没有显示，对于src，它确实会加载路径，但它不会显示在我的屏幕上。也适用于EaselJS部分。我知道，但是我们被告知要使用EaselJS 0.4.2 – user1978133

stage.update（）不是我提到的唯一的东西。如果你还在html标记中修复了其他内容，它应该已经工作了，但是我可以看到你已经找到另一个解决方案:-) – olsn

我现在遇到与EaselJS相同的问题。虽然它可能为你工作，你可以尝试添加一个代码会自动更新画布：

createjs.Ticker.addListener(stage);

我能得到的图像画在画布上添加此之后，但只要我添加任何转换为图像（缩放，定位，高度，宽度）的图像绘制之前它们不会被应用。

我也一直在挠我的脑袋。

来源

2013-01-15 19:59:37

图像不画布上

回答

相关问题