0 
<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 x 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; と、機能しなくなります。

4

3 に答える 3

2 
Background = new Bitmap(imgBackground);
于 2013-01-14T18:42:14.157 に答える
0

現在、EaselJS で同じ問題が発生しています。うまくいくかもしれませんが、キャンバスを自動的に更新するティッカーを追加してみてください。

createjs.Ticker.addListener(stage);

これを追加した後、キャンバスに画像をペイントすることができましたが、画像に変換 (スケール、位置、高さ、幅) を追加するとすぐに、画像が描画される前に適用されません。

私もこれについて頭を悩ませてきました。

于 2013-01-15T19:59:37.990 に答える
0

HTML の場合: の script-tag を のjavascript.js直前に移動する</body>か、少なくとも の中に移動しないようにして<canvas>...</canvas>ください。もう 1 つは、 と との間
にスペースがあるため、一部のブラウザーで問題が発生する可能性があることです。src=id=

updateJavaScript の場合: -methodを実行する必要があります。()そうしないと、その行は update 関数へのリストされた参照になります。

stage.update();

そして、私が気づいた2番目のこと（問題の一部ではありません）：EaselJS 0.4.2を使用していますが、最新にしたい場合に備えて、0.5.0はすでにリリースされています：http:// code.createjs.com/easeljs-0.5.0.min.js ;-)

于 2013-01-15T06:56:25.210 に答える