<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。我打算让背景向左滑动并在结束时重复。
所以我的问题是，为什么图像没有显示在 Canvas 上。
我对此很陌生，所以很抱歉我问了这么简单的问题。
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;
它停止工作。
最佳答案
Background = new Bitmap(imgBackground);
关于javascript - 图像未显示在 Canvas 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14324384/