图片显示不出来

来源:2-1 绘制背景

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

}


写回答 关注

1回答

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

    希望能够帮到你

    qq_风龙_... 回复Minifu...

    我也是谷歌,sublimeText3,这不是浏览器问题,老师视频代码本身有些小问题,需要注意画图顺序,多测试,最初我的也无法显示,后来就搞好了。

    2016-10-06 23:17:47

    共 2 条回复 >

HTML5小游戏---爱心鱼(上)

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92348 学习 · 551 问题

查看课程

相似问题