圖像未顯示在畫布上

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