<!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);
}
2017-10-02
怎么解決的 能說一下嗎
2017-08-18
已解決~