Question

我有两幅画布，它们使用z-index相互叠加。

但是我遇到了一个奇怪的问题：当我绘制到下部画布above的画布时，下部画布上绘制的内容会被删除。

我就是这样做的：

CSS：

.c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100 % ;
  height: 500px;
  margin: 0 auto;
  border: 1px solid red;
}

JavaScript的：

window.canvas = new Object();

for (var i = 1; i < 3; i++) {
  document.getElementById("G").innerHTML += '<canvas id="layer' + i + '" class="c" style="z-index:' + i + ';" oncontextmenu="return false;"></canvas>';
  temp = document.getElementById('layer' + i);
  objname = 'canvas' + i;
  canvas[objname] = temp;
  canvas[objname].ctx = temp.getContext("2d");
}

function draw() {
  canvas.canvas1.ctx.clearRect(0, 0, settings.width, settings.height);
  canvas.canvas2.ctx.clearRect(0, 0, settings.width, settings.height);

  abposx = 50;
  abposy = 50;

  //doesn't draw
  canvas.canvas1.ctx.drawImage(gfx['ground'][0], abposx, abposy);

  //draws
  canvas.canvas2.ctx.drawImage(gfx['building'][0], abposx + 120, abposy + 120);
}

在上面的示例中，我只看到canvas2已绘制，如果我一起删除该画布，则会看到canvas1已绘制。两个图像还显示我是否将两个图像都绘制到the same画布。

但如果我将一个绘制到canvas1而另一个绘制到canvas2我只能看到canvas2上绘制的内容，并且canvas1似乎已被删除。

为什么会这样？我不知道这是否会被其他人尝试复制，但它会变得烦人！我无法解决问题！非常感谢您的想法/建议/修复。

JS问题：http://jsfiddle.net/xJZrQ/18/

Answer 1

看看这个：

document.getElementById("G").innerHTML += '<canvas id="layer'+i+'" class="c" style="z-index:'+i+';" oncontextmenu="return false;"></canvas>';

就像：

el.innerHTML += '...';

所以

el.innerHTML = el.innerHTML + '...';

现在您可能已经理解为什么您的代码不起作用了：当您第二次在循环中执行此类操作时，它会清除innerHTML元素中的#G并更新它，并再次构建DOM，因此绘制第一幅画布的上下文已经过时了。

使用DOM而不是innerHTML。演示：http://jsfiddle.net/mQuWF/

绘制到第二个画布会取消第一个画布

1 个答案: