如何動態地將2個Canvases附加到文檔中，使它們重疊？

我的html包含兩個重疊的畫布。如何動態地將2個Canvases附加到文檔中，使它們重疊？

<canvas id="imCanvas" style="z-index: 1; position: absolute; left:0px; top:0px;" width="512" height="512"></canvas> 
<canvas id="mouseCanvas" style="z-index: 2; position: absolute; left:0px; top:0px;" width="512" height="512"></canvas>

我想通過javascript添加兩個新的畫布到文檔，並用前兩個圖像填充它們。當我嘗試這個時，我總是發現第四個畫布位於第三個畫布的右側，即使我試圖給他們相同的位置。我嘗試追加到一個div或段落結果相同。

<script type="text/javascript"> 
function handleAppendData() { 
    var appendDataP=document.getElementById("appendDataP"); 
    var c1=document.createElement('canvas'); 
    var c2=document.createElement('canvas'); 
    c1.style="z-index: 1"; 
    c2.style="z-index: 2; position: absolute; left:0px;"; 
    c1.width=512; 
    c1.height=512; 
    c2.width=512; 
    c2.height=512; 
    var canvas = document.getElementById('imCanvas'); 
    var mousecanvas = document.getElementById('mouseCanvas'); 
    var ctx1=c1.getContext('2d'); 
    var ctx2=c2.getContext('2d'); 
    ctx1.drawImage(canvas,0,0); 
    ctx2.drawImage(mousecanvas,0,0) 
    appendDataP.appendChild(c1); 
    appendDataP.appendChild(c2); 
} 
</script>

爲什麼我的第二個畫布出現在第一個畫布的右側？

我也試過c2.style.position=c1.style.position，結果相同。

來源

2016-04-08 jwco

包裝你2個畫布元素在一個div容器。將容器div設置爲'position：relative'，將畫布元素設置爲'position：absolute'。 – markE

謝謝@ markE我試過這個，但是直到我按照下面的更新後的答案和jsbin纔開始工作。顯然，我有更多的要學習絕對與相對位置 – jwco

嘗試定位第一畫布絕對和爲相對第二，像

c1.style.zIndex=1; c1.style.position="absolute"; 
c2.style.zIndex=2; c2.style.position="relative";

來源

2016-04-08 15:46:03

這似乎給出了相同的結果：c2再次出現在c1的右側。但我沒有把「絕對」與「相對」定位相提並論，所以我可能會更多地考慮這一點。謝謝。 – jwco

您的代碼存在的問題是您如何使用「element.style」。看看這個http://jsbin.com/fovodagiru/edit?html,js,output –

謝謝 - 這工程！我將不得不閱讀更多關於添加樣式和相對與絕對定位的信息。 – jwco

如何動態地將2個Canvases附加到文檔中，使它們重疊？

回答

相關問題