canvas中drawImage()，先繪制一張大圖，后繪制一張小圖。小圖不會出現(xiàn)。求解
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中瀏覽，星星的圖片出不來，在網(wǎng)頁瀏覽時，只有刷新才能一閃而過；但當(dāng)兩個圖片不重合的時候，星星就可以正常顯示。
請問如何才能讓兩張圖片同時顯示（小圖在大圖的上面）？
2016-12-17
加一個window.requestAnimFrame(gameLoop);的循環(huán)調(diào)用函數(shù)來刷新畫布就可以了。
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()