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

课程

/前端开发

/HTML/CSS

/HTML5小游戏---爱心鱼（上）

我的背景没出来，哪位大神帮我看看？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body{

padding-top:10px;

}

.main{

width:800px;

height:600px;

margin:0 auto;

}

#allcanvas{

width:800px;

height:600px;

margin:0 auto;

position:relative;

}

#canvas1{

position:absolute;

bottom:0;

left:0;

z-index:1;

}

#canvas2{

position:absolute;

bottom:0;

left:0;

z-index:1;


}



</style>

</head>


<body>

<div class="main">

      <div id="allcanvas">

           <div id="canvas1" height='600' width='800'></div>

           <div id="canvas2" height='600' width='800'></div>

      </div>

</div>

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

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

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

</body>

</html>

// JavaScript Document

var can1;

var can2;

var ctx1;

var ctx2;

var lastTime;

var deltaTime;

var canWidth;

var canHeight;

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');//fish 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=can2.height;

}

function gameloop(){

window.requestAnimFrame(gameloop);//循环

var now=Date.now();

deltaTime=now-lastTime;

lastTime=now;

}

// JavaScript Document

function drawBackground(){

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

}


xiao55555

2015-12-11

源自：HTML5小游戏---爱心鱼（上）  2-1

关注问题 我要回答
1984
操作
收起

正在回答

9 回答

慕粉13261604892
2016-11-30

http://img1.sycdn.imooc.com//583ea5e500015c1a06090181.jpg

应该是canvas 不是div

0 回复 有任何疑惑可以回复我~
收起回答
且听风吟cy
2016-08-02

window.requestAnimFrame(gameloop);     这里也写错了、

应该是window.requestAnimationFrame(gameloop);

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

慕仙837676

那commonFunctions.js文档里的window.requestAnimFrame需要改吗？
2018-12-28 回复 有任何疑惑可以回复我~
姑娘有点太傲娇
2016-01-08

你的问题解决了吗？我出现了和你一样的问题 你是怎么解决的

0 回复 有任何疑惑可以回复我~
收起回答
慕无忌5517827
2015-12-31

我们是一样的问题，但是，我去js文件下看到我的background.js根本就是0KB，所以，你看一下你的会不会是在编辑器下没有保存你的background.js，我的是这个问题，保存了背景就出来了

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

xiaxiaaichixia

怎么保存的》？
2016-11-24 回复 有任何疑惑可以回复我~
尤快快
2015-12-17

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

can1=document.getElementById("canvas1");

ctx1=can1.getContext("2d");

can2=document.getElementById("canvas2");

ctx2=can2.getContext("2d");


canWidth=can1.width;

canHeight=can1.height;

bgPic.src="./src/background.jpg";

}

function gameloop () {

requestAnimationFrame(gameloop);//setInterval setTimeout

var now=Date.now(0);

deltaTime=now-lastTime;

lastTime=now;


drawBackground();

}

就是加下划线的地方报错 好烦

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

尤快快 回复 xiao55555 提问者

我找到这个错误了 但是又发现别的错了
2015-12-17 回复 有任何疑惑可以回复我~
#2

xiao55555 提问者 回复 尤快快

这是什么错误？
2015-12-17 回复 有任何疑惑可以回复我~
#3

天火奇缘

我也是，一直报错
2017-08-20 回复 有任何疑惑可以回复我~
查看1条回复
尤快快
2015-12-16

http://img1.sycdn.imooc.com//5671725e0001834402880145.jpg这里老是报错can1.getContext is not a function 不知道为什么 求帮助

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

xiao55555 提问者

我还以为是回复我的，没想到是提问的，你用的什么工具？
2015-12-16 回复 有任何疑惑可以回复我~
#2

尤快快 回复 xiao55555 提问者

sublime Text2 呀 能解决么
2015-12-17 回复 有任何疑惑可以回复我~
#3

慕婉清0837092

我也是，总说不是一个function
2016-06-20 回复 有任何疑惑可以回复我~
#4

天火奇缘

你这个解决了没？我也是这个问题
2017-08-20 回复 有任何疑惑可以回复我~
查看1条回复
echo_kinchao
2015-12-14

最好写成相对路径

0 回复 有任何疑惑可以回复我~
收起回答
xiao55555 提问者
2015-12-11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body{

padding-top:10px;

}

.main{

width:800px;

height:600px;

margin:0 auto;

}

#allcanvas{

width:800px;

height:600px;

margin:0 auto;

position:relative;

}

#canvas1{

position:absolute;

bottom:0;

left:0;

z-index:1;

}

#canvas2{

position:absolute;

bottom:0;

left:0;

z-index:1;


}



</style>

</head>


<body>

<div class="main">

      <div id="allcanvas">

           <div id="canvas1" height='600' width='800'></div>

           <div id="canvas2" height='600' width='800'></div>

      </div>

</div>

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

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

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

</body>

</html>

// JavaScript Document

var can1;

var can2;

var ctx1;

var ctx2;

var lastTime;

var deltaTime;

var canWidth;

var canHeight;

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');//fish 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=can2.height;

}

function gameloop(){

window.requestAnimFrame(gameloop);//循环

var now=Date.now();

deltaTime=now-lastTime;

lastTime=now;

drawBackground();

}

// JavaScript Document

function drawBackground(){

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

}


0 回复 有任何疑惑可以回复我~
收起回答
李晓健
2015-12-11

没看到你调用 drawBackground 这个画背景的方法呀

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

xiao55555 提问者

我又加上了，但还是没有效果
2015-12-11 回复 有任何疑惑可以回复我~
#2

xiao55555 提问者 回复 李晓健

我查了一下，改了src/background.jpg,还是不行
2015-12-11 回复 有任何疑惑可以回复我~
#3

李晓健 回复 xiao55555 提问者

你要改对才行，你看下浏览器的控制台，有没有报什么错。写代码不对靠猜的，要看具体的错误信息，根据报错信息去原因。
2015-12-11 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
HTML5小游戏---爱心鱼（上）
  • 参与学习       92353    人
  • 解答问题       550    个

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

进入课程

本课相似问答

2 回答没有报错，可是背景图片没有出来，哪位大神帮我看看谢谢了：（

5 回答图片加载不出来 哪位大神帮我看看

1 回答奇怪，大神帮我看看什么情况

2 回答背景不显示..求助大神

3 回答背景出不来
搜索更多本课相关问答

我的背景没出来，哪位大神帮我看看？

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