圖像不畫布上

<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

圖像不畫布上

回答

相關問題