我的背景没出来，哪位大神帮我看看？-慕课网

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

来源：2-1 绘制背景

xiao55555

2015-12-11 21:46

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

<head>

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

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>

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

慕粉13261604892

2016-11-30 18:12:07

应该是canvas 不是div

0 0
且听风吟cy

2016-08-02 22:49:09

window.requestAnimFrame(gameloop); 这里也写错了、
应该是window.requestAnimationFrame(gameloop);

1 0

慕仙8376...

那commonFunctions.js文档里的window.requestAnimFrame需要改吗？

2018-12-28 11:33:09

共 1 条回复 >
姑娘有点太傲娇

2016-01-08 23:29:19

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

0 0
慕无忌5517827

2015-12-31 13:24:19

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

1 0

xiaxia...

怎么保存的》？

2016-11-24 01:49:02

共 1 条回复 >
尤快快

2015-12-17 14:53:18

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();
}
就是加下划线的地方报错好烦

4 0

天火奇缘

我也是，一直报错

2017-08-20 08:17:04

共 4 条回复 >
尤快快

2015-12-16 22:17:43

这里老是报错can1.getContext is not a function 不知道为什么求帮助

4 0

天火奇缘

你这个解决了没？我也是这个问题

2017-08-20 08:19:42

共 4 条回复 >
echo_kinchao

2015-12-14 10:22:03

最好写成相对路径

0 0
xiao55555

2015-12-11 22:15:01

<!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 0
李晓健

2015-12-11 22:04:13

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

4 0

李晓健回复xiao55...

你要改对才行，你看下浏览器的控制台，有没有报什么错。写代码不对靠猜的，要看具体的错误信息，根据报错信息去原因。

2015-12-11 22:35:14

共 4 条回复 >