function?game()?{
//?body...
init();
lasttime?=?Date.now();
delttime?=?0;
game_loop();
}
function?init?()?{
//獲得canvas?contex
//canvas1?用來處理魚,土壤,UI,圓圈
can1?=?document.getElementById("canvas1");
//canvas2?用來處理背景???? can2?=?document.getElementById("canvas2");
ctx1?=?can1.getContext('2d');
ctx2?=?can2.getContext('2d');
bgPic.src="../SRC/bg.jpg";//文件路徑
canWidth?=?can2.width;
canHight?=?can2.height;
dram_image();
}
function?game_loop?()?{
//?body...比如魚的游動(dòng)
//該函數(shù)要對(duì)瀏覽器適配
requestAnimFrame(game_loop);//比setTimeout?setInterval?科學(xué)?這個(gè)是根機(jī)器性能有關(guān)
//console.log("game");
var?now?=?Date.now();
delttime?=?now?-?lasttime;
lasttime?=?now;
}
/*畫canvas背景*/
function?dram_image?(){
console.log(canHight,canWidth,bgPic);
ctx2.drawImage(bgPic,0,0,canWidth,canHight);
}
2016-08-27
寫成這樣在init里面調(diào)用就行了
function drawBackground() {
????bgPic.onload=function(){
????????ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
????}
}
2016-08-27
同問,,,