大鱼显示不出来,将ctx1改成ctx2才显示

来源:2-6 果实绘制(果实数量控制)

eroer

2018-05-28 11:37

这是CSS代码:

body{    padding: 20px;}
.all_bg {    
display: inline-block;    
width: 800px;    
height: 600px;    
position: relative;
}
.all_bg .allCanvas {    
position: relative;    
width: 800px;    
height: 600px;    
margin: 0;
}
#canvas1 {    
position: absolute;    
top: 0;    
left: 0;    
z-index: 1;
}
#canvas2 {    
position: absolute;    
top: 0;    
left: 0;    
z-index: 0;
}

大鱼的JS代码:

var bigFishObj = function(){    
this.x;    
this.y;    
this.bigEye = new Image();    
this.bigBody = new Image();    
this.bigTail = new Image();
}
bigFishObj.prototype.init = function(){    
this.x = canWidth * 0.5;    
this.y = canHeight * 0.5;    
this.bigEye.src = "./src/bigEye0.png";    
this.bigBody.src = "./src/bigSwim0.png";    
this.bigTail.src = "./src/bigTail0.png";
}
bigFishObj.prototype.drawImage = function(){    
ctx1.save();    
ctx1.drawImage(this.bigEye, this.x, this.y);    
ctx1.drawImage(this.bigBody, this.x, this.y);    
ctx1.drawImage(this.bigTail, this.x, this.y);    
ctx1.restore();
}

而且我的canvas1和canvas2不是重叠的,但是看老师演示两个canvas是重叠在一起的

https://img1.mukewang.com/5b0b795800010ed014330805.jpg

写回答 关注

1回答

  • eroer
    2018-05-28 20:45:44

    将CSS代码嵌入到HTML代码中就可以了,为什么使用<link>将CSS链接到HTML文件中两个canvas就不重叠?

HTML5小游戏---爱心鱼(上)

学做HTML5游戏,轻轻松松带你上手,适合刚入手游戏开发的同学

92350 学习 · 551 问题

查看课程

相似问题