为甚么我写完代码背景图不显示

tinyHeart.html:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML小游戏---爱心鱼</title>
		<style type="text/css">
			body{
				padding-top: 10px;
			}
			.all_bg{
				width:800px;
				height: 600px;
				margin: 0px auto;
			}
			#allcanvas{
				position: relative;
				width: 800px;
				height: 600px;
				margin: 0px;
			}
			#canvas1{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
			}
			#canvas2{
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 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>
	</body>
</html>

main.js:

var can1;
var can2;

var ctx1;
var cxt2;

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");//fishes,dust,UI,circle
	ctx1=can1.getContext('2d');
	can2=document.getElementById("canvas2");//background,ane,fruits
	ctx2=can2.getContext('2d');
	
	bgPic.src="./src/background.jpg";
	
	canWidth=can1.width;
	canHeight=can1.height;
	
}

function gameloop()
{
	window.requestAnimFrame(gameloop);
	var now=Date.now();
	deltaTime=now-lastTime；
	lastTime=now；
	
	drawBackground();
	
}

background.js:

function drawBackground()
{
	ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}

慕桂英9800889

浏览 1348回答 1

1回答

李晓健

function gameloop(){ requestAnimationFrame(gameloop); var now=Date.now(); //以下两行是中文; deltaTime=now-lastTime; lastTime=now; drawBackground(); }

随时随地看视频慕课网APP