為甚么我寫完代碼背景圖不顯示
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);
}
2016-01-08
你的問題解決了嗎？？那個注釋是什么意思
2015-12-30
function?gameloop(){ ????requestAnimationFrame(gameloop); ????var?now=Date.now(); ????//以下兩行是中文; ????deltaTime=now-lastTime; ????lastTime=now; ????drawBackground(); }看注釋?