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

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

来源：2-5 随机生成很多星星

qq_kathie周洁_0

2016-12-15 17:18

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

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

写回答关注

2回答

9玖月

2016-12-17 15:46:39

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

1 0

好久不见呀

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

2018-02-10 13:10:38

共 1 条回复 >

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 0

canvas实现星星闪烁特效

使用HTML5实现轮播图片上的序列帧，进行拆分讲解，逐步实现目标

54187 学习 · 123 问题

相似问题

回答 1

回答 1

回答 1

requestAnimFrame对后面绘制女孩和星星图片有影响吗？

回答 3

循环绘制星星

回答 1

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