4

z-indexを使用して互いに重なり合う2つのキャンバスがあります。

しかし、私はそれらに奇妙な問題を抱えています。下のキャンバスであるキャンバスに描画すると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 + '...';

これで、コードが機能しない理由をおそらく理解できます。ループでこのようなことを2回行うと、要素がクリアinnerHTMLされ#G、更新されてDOMが再構築されるため、最初のキャンバスを描画するためのコンテキストが無効になります。

innerHTMLの代わりにDOMを使用してください。デモ： http： //jsfiddle.net/mQuWF/

于 2012-12-10T03:45:48.713 に答える