main.js

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");//前
?? ?ctx1=can1.getcontext('2d');
?? ?can2=document.getElementById("canvas2");//hou
?? ?ctx2=can2.getcontext('2d');
?? ?
?? ?bgPic.src="./src/background.jpg";
?? ?
?? ?canWidth=can1.width;
?? ?canHeight=can1.height;
?? ?
}
function gameloop()
{
?? ?requestAnimFrame(gameloop);
?? ?var now=Date.now();
?? ?deltaTime=now-lastTime;
?? ?lastTime=now;
?? ?
?? ?drawBackground();
}

background.js

function drawBackground()
{
?? ?ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}

commFunctions.js已放入相應(yīng)的文件夾