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

我的背景没出来,哪位大神帮我看看?

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

}


正在回答

9 回答

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

应该是canvas 不是div

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

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

应该是window.requestAnimationFrame(gameloop);

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

慕仙837676

那commonFunctions.js文档里的window.requestAnimFrame需要改吗?
2018-12-28 回复 有任何疑惑可以回复我~

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

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

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

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

xiaxiaaichixia

怎么保存的》?
2016-11-24 回复 有任何疑惑可以回复我~

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

xiao55555 提问者 回复 尤快快

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

天火奇缘

我也是,一直报错
2017-08-20 回复 有任何疑惑可以回复我~
查看1条回复

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条回复

最好写成相对路径

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

<!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 回复 有任何疑惑可以回复我~

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

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

xiao55555 提问者

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

李晓健 回复 xiao55555 提问者

那就再看一下你的图片路径是不是对的了
2015-12-11 回复 有任何疑惑可以回复我~
#3

xiao55555 提问者 回复 李晓健

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

李晓健 回复 xiao55555 提问者

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

举报

0/150
提交
取消

我的背景没出来,哪位大神帮我看看?

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