4

我有两个使用 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/

4

1 回答 1

3

看这个：

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/

于 2012-12-10T03:45:48.713 回答