                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /HTML5小游戏---爱心鱼（上）

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

tinyHeart.html:

<!DOCTYPE html>

<html>

<head>

<title>HTML小游戏---爱心鱼</title>

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>

</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

2015-12-30

源自：HTML5小游戏---爱心鱼（上） 2-1

关注问题我要回答

895

操作

收起

2 回答

姑娘有点太傲娇
2016-01-08

你的问题解决了吗？？那个注释是什么意思

0 回复有任何疑惑可以回复我~

收起回答

孙小猴之java

原因就是视频上讲的 requestanimationFrame,老师拼写错了,也不知道视频上怎么出来背景的, 反正我本来也是没出,后来改了就出了,百度看了下这个才是完整的写法

2016-01-20 回复有任何疑惑可以回复我~

李晓健
2015-12-30

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

看注释

0 回复有任何疑惑可以回复我~

收起回答