javascript - 绘制到第二个 Canvas 会取消第一个 Canvas

Question

我有两个 Canvas ，它们使用 z-index 彼此重叠。

但我遇到了一个奇怪的问题:当我绘制到下部 Canvas 上方的 Canvas 时，下部 Canvas 上绘制的内容将被删除。

我是这样做的:

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 被绘制，如果我将 Canvas 一起移除，我就会看到 canvas1 被绘制。如果我将两个图像绘制到相同的 Canvas ，两个图像也会显示。

但是，如果我将一个绘制到 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，因此用于绘制第一个 Canvas 的上下文已失效。

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