为甚么我写完代码背景图不显示

来源:2-2 绘图API回顾

丰业

2015-12-01 12:42

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');
    can2=document.getElementById("canvas2");//hou
    ctx2=can2.getcontext('2d');
    
    bgPic.src="./src/background.jpg";
    
    canWidth=can1.width;
    canHeight=can1.height;
    
}
function gameloop()
{
    requestAnimFrame(gameloop);
    var now=Date.now();
    deltaTime=now-lastTime;
    lastTime=now;
    
    drawBackground();
}

background.js

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

commFunctions.js已放入相应的文件夹

写回答 关注

3回答

  • qq_牧月云_0
    2015-12-10 15:20:26
    已采纳

    getcontext应该是getContext

    丰业

    非常感谢!

    2015-12-15 11:13:15

    共 1 条回复 >

  • 慕仙837676
    2018-12-29 08:54:30

     这部分代码

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

    改为

    tinyHeart.js

    <img id="img" src="./src/background.jpg" ></img>

    main.js

    bgpic=document.getElementById("img");

    照着改下看能否出来 ,我的之前就是这样的


  • 慕UI9639136
    2016-12-14 09:36:07

    function gameloop()
    {
        requestAnimationFrame(gameloop);
        var now=Date.now();
        deltaTime=now-lastTime;
        lastTime=now;
        
        drawBackground();
    }

    加粗的地方改一下就好了

HTML5小游戏---爱心鱼(上)

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

92348 学习 · 551 问题

查看课程

相似问题