为了账号安全,请及时绑定邮箱和手机立即绑定

图片显示不出来

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 回答

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

function drawBackground(){

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

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

}

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

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

希望能够帮到你

0 回复 有任何疑惑可以回复我~
#1

Minifull 提问者

这些是html和main函数里的吧,我都有写的,但是我写的小鱼和水草什么的也都显示不出来,所以我感觉可能不是代码问题而是浏览器问题,我用的是谷歌浏览器,编译器是sublime,不知道该怎么把写出来的东西显示到浏览器上
2016-09-24 回复 有任何疑惑可以回复我~
#2

qq_风龙_0 回复 Minifull 提问者

我也是谷歌,sublimeText3,这不是浏览器问题,老师视频代码本身有些小问题,需要注意画图顺序,多测试,最初我的也无法显示,后来就搞好了。
2016-10-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
HTML5小游戏---爱心鱼(上)
  • 参与学习       92348    人
  • 解答问题       551    个

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

进入课程

图片显示不出来

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信