<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tinyHeart</title>
<style type="text/css" media="screen">
body{
padding-top: 10px;
}
.all_bg{
width:800px;
height: 600px;
margin: 0 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>
<div id="allcanvas" >
<canvas id="canvas1"width="800"height="600"></canvas>
<canvas id="canvas2"width="800"height="600"></canvas>
</div>
</div>
<script src="./js/commonFunctions.js"></script>
<script src="./js/main.js"></script>
<script src="./js/backround.js"></script>
</body>
</html>var ctx1;
var ctx2;
var canWidth;
var canHight;
var lastTime;
var deltaTime;
var bgPic=new Image();
document.body.onload=game;
function game(){
init();
lastTime=Date.now();
deltaTime=0;
gameloop();
}
//初始化工作
function init(){
var can1=document.getElementById('canvas1');//fishes,dust,ui,circle
ctx1=can1.getContext("2d");
var can2=document.getElementById('canvas2');//background,ane海葵,fruits
ctx2=can2.getContext("2d");
bgPic.src='./src/background.jpg';
canWidth=ctx1.width;
canHight=ctx1.height;
}
//动画循环
function gameloop(){
window.requestAnimFrame(gameloop);//根据计算机性能自动设置间隔多少时间绘制下一帧
var now=Date.now();
deltaTime=now-lastTime;
lastTime=now;
drawBg();
}function drawBg(){
ctx2.drawImage(bgPic,0,0,canWidth,canHight);
}
