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中浏览,星星的图片出不来,在网页浏览时,只有刷新才能一闪而过;但当两个图片不重合的时候,星星就可以正常显示。
请问如何才能让两张图片同时显示(小图在大图的上面)?
加一个window.requestAnimFrame(gameLoop);的循环调用函数来刷新画布就可以了。
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()
canvas实现星星闪烁特效
54187 学习 · 121 问题
相似问题