没有报错，可是背景图片没有出来，哪位大神帮我看看谢谢了：（-慕课网

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

来源：2-1 绘制背景

慕后端9417217

2017-08-18 17:34

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tinyHeart</title>
        <style type="text/css" media="screen">
                    body{
            padding-top: 10px;
        }
                    .all_bg{
            width:800px;
            height: 600px;
            margin: 0 auto;
        }
           #allcanvas{
            position: relative;
            width:800px;
            height: 600px;
            margin: 0px;
        }
                    #canvas1{
            position:absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
        }
                    #canvas2{
            position:absolute;
            bottom: 0;
            left: 0;
            z-index: 0;
        }
        </style>
    </head>
    <body>
        <div>
            <div id="allcanvas" >
                <canvas id="canvas1"width="800"height="600"></canvas>
                <canvas id="canvas2"width="800"height="600"></canvas>
            </div>
        </div>
        <script src="./js/commonFunctions.js"></script>
        <script src="./js/main.js"></script>
        <script src="./js/backround.js"></script>
    </body>
</html>

var ctx1;
var ctx2;

var canWidth;
var canHight;

var lastTime;
var deltaTime;

var bgPic=new Image();

document.body.onload=game;

function game(){
    init();
    lastTime=Date.now();
    deltaTime=0;
    gameloop();
}

//初始化工作
function init(){
    var can1=document.getElementById('canvas1');//fishes,dust,ui,circle
    ctx1=can1.getContext("2d");
    var can2=document.getElementById('canvas2');//background,ane海葵,fruits
    ctx2=can2.getContext("2d");

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


    canWidth=ctx1.width;
    canHight=ctx1.height;
}

//动画循环
function gameloop(){
    window.requestAnimFrame(gameloop);//根据计算机性能自动设置间隔多少时间绘制下一帧
    var now=Date.now();
    deltaTime=now-lastTime;
    lastTime=now;

   drawBg();
}

function drawBg(){
    ctx2.drawImage(bgPic,0,0,canWidth,canHight);
}

写回答关注

2回答

qq_我_149

2017-10-02 15:21:34

怎么解决的能说一下吗

0 0
慕后端9417217

2017-08-18 17:42:28

已解决~

2 0

Youare...

怎么解决的能说一下嘛

2020-02-11 17:17:25

共 2 条回复 >

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

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

92350 学习 · 551 问题

查看课程

相似问题

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

回答 9

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

回答 5

橙色果实出来了，可是没有蓝色的，帮我看一下代码吧谢谢大佬了

回答 2

背景图片始终没出来

回答 1

背景图片加载不出来

回答 1

打开慕课网App查看更多内容