在第二个画布上绘制会取消第一个画布。

Question

我有两个画布，它们采用z-index叠放在一起。

但是我遇到了一个奇怪的问题：当我向位于下层的画布上绘制内容时，下层画布上的任何内容都会被清除。

这是我的做法：

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，如果将这两个图像都绘制到同一个画布the same中，则两个图像也会显示出来。

但是，如果我将其中一个绘制到canvas1，另一个绘制到canvas2，那么我只能看到在canvas2上绘制的内容，而且canvas1似乎被擦除了。

为什么会这样？我不知道是否有其他人尝试过这种情况，但这让人感到烦恼！我无法解决这个问题！建议/修复方法非常感谢。

带有问题的JSfiddle链接：http://jsfiddle.net/xJZrQ/18/

- Sir

---

你为什么在两个画布上绘图？ 另外，能否提供一个JSFiddle示例？ - ahren

@eicto http://jsfiddle.net/xJZrQ/18/ 对我来说在jsfiddle上根本无法绘制。 - Sir

编辑后的链接，请再次检查。 - Sir

你真是个天才！假设你的答案解决了问题 :P 我会等待的！ :) - Sir

不要使用 innerHTML 和 +=。永远不要这样做。https://dev59.com/UHE95IYBdhLWcg3wdtmj#2305677 - Bergi

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/。

- Danil Speransky

---

那我只需要执行 document.getElementById("G").innerHTML + //etc 吗？ - Sir

是的，我只卡在一个问题上了。假设我没有设置宽度和高度（因为它在CSS中设置），那么如何在JS中获取画布的宽度和高度？我尝试过 settings.width = document.getElementById('layer'+i).clientWidth; 但是没有成功。 - Sir

我原本打算做的是使用CSS尺寸获取画布的尺寸，然后用JS设置画布的尺寸。这个可以实现对吧？ - Sir

我不明白...目前宽度和高度都是"0"，所以什么都没有绘制出来 :( - Sir

我尝试使用包含画布的 div 尺寸来设置画布尺寸，但仍然显示为“0”“0”，就像这样：http://pastebin.com/vqqtBDsH - Sir