问答详情
源自：2-5 随机生成很多星星

canvas中drawImage()，先绘制一张大图，后绘制一张小图。小图不会出现。求解

var girl = new  Image();
var star = new  Image();
 
 
function init(){
    can=document.getElementById('girl');
    ctx=can.getContext('2d');
    //绘制canvas
    drawBgd();
     
    girl.src="images/girl.jpg";
    star.src="images/star.png";
    drawGirl();
    drawStar();
     
     
}
//绘制canvas背景
function drawBgd(){
    ctx.beginPath();
    ctx.fillStyle="#1B6D85";
    ctx.fillRect(0,0,w,h);
};
//绘制女孩
function drawGirl(){
    girl.onload=function(){
        ctx.drawImage(girl,100,100,400,200);
    }
};
//绘制星星
function drawStar(){
    star.onload=function(){
        ctx.drawImage(star,200,200，49,7);
    }
};
init()

但在chrome中浏览，星星的图片出不来，在网页浏览时，只有刷新才能一闪而过；但当两个图片不重合的时候，星星就可以正常显示。

http://img.mukewang.com/58525ff3000114f806050385.jpg

请问如何才能让两张图片同时显示（小图在大图的上面）？


提问者：qq_kathie周洁_0 2016-12-15 17:18

个回答

  • 9玖月
    2016-12-17 15:46:39

    加一个window.requestAnimFrame(gameLoop);的循环调用函数来刷新画布就可以了。

    0
  • 9玖月
    2016-12-17 15:45:26

    var girl = new  Image();
var star = new  Image();
var ctx;
var can;

var w;
var h;

function init(){
    can=document.getElementById('canvas');
    ctx=can.getContext("2d");
    drawBgd();

    girl.src = "src/girl.jpg";
    star.src = "src/star.png";


    gameLoop();
}

function gameLoop() {     //用来刷新canver画布的
    window.requestAnimFrame(gameLoop);

    drawGirl();
    drawStar();

}


//绘制canvas背景
function drawBgd(){
    ctx.beginPath();
    ctx.fillStyle="#1B6D85";
    ctx.fillRect(0,0,w,h);
};
//绘制女孩
function drawGirl(){
    girl.onload=function(){
        ctx.drawImage(girl,100,150,600,300);
    }
}
//绘制星星
function drawStar(){
   // star.onload=function(){
        ctx.drawImage(star,200,200, 49, 7);
   // }
}
// init()


    0