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浏览 1979回答 1
1回答
-
叶0528
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>girl</title> <script> window.onload=function(){ previewHandler(); } function previewHandler(){ var canvas = document.getElementById("girl"); var context = canvas.getContext("2d"); fillBackgroundColor(canvas,context); drawGirl(canvas, context); drawStar(canvas, context); } function fillBackgroundColor(canvas,context){ var bgColor = 'black'; context.fillStyle=bgColor; context.fillRect(0,0,canvas.width,canvas.height); } function drawGirl(canvas,context){ var girl = new Image(); girl.src = "girl.jpg"; girl.onload = function(){ context.drawImage(girl,100,100,400,200); } } function drawStar(canvas,context){ var star = new Image(); star.src = "star.png"; star.onload = function(){ context.drawImage(star,200,200,49,49); } } function makeImage(){ var canvas = document.getElementById("girl"); canvas.onclick = function(){ window.location = canvas.toDataURL("image/png"); }; } </script> </head> <body> <h1>girl</h1> <canvas id="girl" width="600" height="300"> <p>Please upgrade your browser to use canvas!</p> </canvas> </body> </html>
随时随地看视频慕课网APP
相关分类
Html5