Question

我正在使用Javascript和库为学校创建游戏。现在我的问题是，我的drawImage对我的背景图像不起作用。

//Javascript:
$(document).ready(function() { 
// To do: code schrijven 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 

// achtergrond laden 
var home = new Image(); 
home.src = "img/scene2.jpg";
var level1 = new Image(); 
level1.src = "img/welcome.jpg"; 
var level2 = new Image(); 
level2.src = "img/town1.jpg"; 

var msg = new MessageBox();

//msg.text = "Welcome to Storybrooke!"; 
//msg.showMe = true; 

function draw(){ 


    ctx.drawImage(home, 0, 0);

    //msg.draw(); 

}

// de functie 'draw' eenmalig gestart 
draw(); 

//HTML
<!doctype html>

<html>
<head>
    <link href="Game_design.css" rel="stylesheet" type="text/css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Mario</title>

</head>

<body>
<center>
    <container> 

    </container>
    <canvas id="myCanvas" width="1200" height="700" ></canvas>
</center>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Game_test.js"></script> 
<script src="Object.js"></script>

</body>

</html>

我无法将背景作为实际的背景图片，因为我希望在游戏中点击几下后再进行更改。谁能在这里看到问题？因为我不能＆＃t; t ^^＆＃34;

Answer 1

您发布的代码最后缺少})。假设这是一个错字，我打赌真正的问题是你不是在等待加载图像。如果您在此示例中稍微更改了代码：

        var home = new Image();
        home.onload = draw;
        home.src = "http://www.placekitten.com/120/220";

并在“就绪”处理程序结束时取消对draw()的调用，它应该可以正常工作。 Here is a working CodePen.

drawImage（）无法正常运行javascript

1 个答案: