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