问答详情
源自:2-1 绘制背景

图片显示不出来

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();

}


提问者:Minifull 2016-09-22 17:08

个回答

  • qq_风龙_0
    2016-09-23 13:42:43

    drawBackground();//这是画背景图片的函数,你都没有放出来,给你补上,不知道是不是你想要的

    function drawBackground(){

    //背景绘制到第二个canvas画布上

    ctx2.drawImage(bgPic,0,0,canWidth,canHeight);

    }

    老师视频有好几个js文件,也包括这个背景图片绘画,注意在html页面引用

    <script type="text/javascript" src="js/background.js"></script>

    希望能够帮到你