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中浏览，星星的图片出不来，在网页浏览时，只有刷新才能一闪而过；但当两个图片不重合的时候，星星就可以正常显示。请问如何才能让两张图片同时显示（小图在大图的上面）？
1 回答
叶0528
TA贡献15条经验 获得超10个赞
<!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>- 1 回答
- 1 关注
- 2066 浏览
添加回答
举报
0/150
提交
取消