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

背景图片出不来怎么办?

html:

<!DOCTYPE HTML>
<html>
<head>
<meate charset="utf-6">
<title>tinyHeart</title>
<style type="text/css">
body{
   padding-top:10px;
}
.all_bg{
    width:800px;
    height:600px;
    margin:0 auto;
}
#allcanvas{
    position:reative;
    width:800px;
    height:600px;
    margin:0px;
}
#canvas1{
    position:absolute;
    bottom:0;
    left:0;
    zindex:1;
}
#canvas2{
    position:absolute;
    bottom:0;
    left:0;
    zindex:0;
}
</style>
</head>
<body>
<div class="all_bg">
<div id="allcanvas">
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
</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/background.js"></script>
<script type="text/javascript" src="js/ane.js"></script>
<script type="text/javascript" src="js/fruit.js"></script>
</body>
<html>

main.js:

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

ctx1 = can1.getContext('2d');   //fishes dust UI circle

can2 = document.getElementById("canvas2");

ctx2 = can2.getContext('2d');   //background ane fruits
    bgPic.src="./src/background.jpg";
    canWidth=can1.width;
    canHeight=can1.height;
    ane = new aneObj();
    ane.init();
    fruit=new fruitObj();
    fruit.init();
}
function gameloop(){
   window.requestAnimFrame(gameloop);
          var now=Date.now();
     deltaTime= now - lastTime;
     lastTime=now;
     drawBackground();
     ane.draw();
     fruit.draw();
     
}

background.js:

function drawBackground(){
     ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}

正在回答

3 回答

把最后的background.js改为这样就可以显示图片了。

bgPic.onload = function() {

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

}


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

<!DOCTYPE HTML> 改为 <!DOCTYPE THML>

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

Withoutmelv

无语了
2019-09-02 回复 有任何疑惑可以回复我~

刷新一下试试

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

举报

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

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

进入课程

背景图片出不来怎么办?

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