                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /canvas实现星星闪烁特效

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

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

qq_kathie周洁_0

2016-12-15

源自：canvas实现星星闪烁特效 2-5

关注问题我要回答

5226

操作

收起

2 回答

9玖月
2016-12-17

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

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

收起回答

好久不见呀

我有个问题，就是使用drawImage的时候如何清除自己绘制的图片

2018-02-10 回复有任何疑惑可以回复我~

9玖月
2016-12-17

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 回复有任何疑惑可以回复我~

收起回答