大鱼显示不出来,将ctx1改成ctx2才显示
这是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是重叠在一起的
