Minifull
2016-09-22 17:08
var can1;
var can2;
var ctx1;
var ctx2;
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,one,fruits
ctx2=can2.getContext('2d');
bgPic.src="./src/background.jpg";
canWidth=can1.width;
canHeight=can1.height;
}
function gameloop()
{
window.requestAnimationFrame(gameloop);//setInterval,setTimeout,frame per second
console.log("loop");
var now=Date.now();
deltaTime=now-lastTime;
lastTime=now;
drawBackground();
}
drawBackground();//这是画背景图片的函数,你都没有放出来,给你补上,不知道是不是你想要的
function drawBackground(){
//背景绘制到第二个canvas画布上
ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}
老师视频有好几个js文件,也包括这个背景图片绘画,注意在html页面引用
<script type="text/javascript" src="js/background.js"></script>
希望能够帮到你
HTML5小游戏---爱心鱼(上)
92348 学习 · 551 问题
相似问题