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

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 似乎已被删除。

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

JSfiddle 解决这个问题：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 + '...';

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

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