<!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;
}
//動(dòng)畫循環(huán)
function?gameloop(){
????window.requestAnimFrame(gameloop);//根據(jù)計(jì)算機(jī)性能自動(dòng)設(shè)置間隔多少時(shí)間繪制下一幀
????var?now=Date.now();
????deltaTime=now-lastTime;
????lastTime=now;
???drawBg();
}function?drawBg(){
????ctx2.drawImage(bgPic,0,0,canWidth,canHight);
}
2017-10-02
怎么解決的 能說(shuō)一下嗎
2017-08-18
已解決~