                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /HTML5小游戲---愛心魚（上）

背景圖片出不來怎么辦？

html:

<!DOCTYPE HTML>
<html>
<head>
<meate charset="utf-6">
<title>tinyHeart</title>
<style type="text/css">
body{
?? padding-top:10px;
}
.all_bg{
??? width:800px;
??? height:600px;
??? margin:0 auto;
}
#allcanvas{
??? position:reative;
??? width:800px;
??? height:600px;
??? margin:0px;
}
#canvas1{
??? position:absolute;
??? bottom:0;
??? left:0;
??? zindex:1;
}
#canvas2{
??? position:absolute;
??? bottom:0;
??? left:0;
??? zindex:0;
}
</style>
</head>
<body>
<div class="all_bg">
<div id="allcanvas">
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/background.js"></script>
<script type="text/javascript" src="js/ane.js"></script>
<script type="text/javascript" src="js/fruit.js"></script>
</body>
<html>

main.js:

var can1;
var can2;
var ctx1;
var ctx2;
var canWidth;
var canHeight;
var lastTime;
var deltaTime;
var bgPic= new Image();
document.body.onload=game;
function game(){
??? init();
??? lastTime=Date.now();
??? deltaTime=0;
??? gameloop();
? ?
}
function init(){
?? //獲得canvas? context
? can1 = document.getElementById("canvas1");

ctx1 = can1.getContext('2d');?? //fishes dust UI circle

can2 = document.getElementById("canvas2");

ctx2 = can2.getContext('2d');?? //background ane fruits
??? bgPic.src="./src/background.jpg";
??? canWidth=can1.width;
??? canHeight=can1.height;
??? ane = new aneObj();
??? ane.init();
??? fruit=new fruitObj();
??? fruit.init();
}
function gameloop(){
?? window.requestAnimFrame(gameloop);
????????? var now=Date.now();
???? deltaTime= now - lastTime;
???? lastTime=now;
???? drawBackground();
???? ane.draw();
???? fruit.draw();
??? ?
}