Question

我的HTML包含两个重叠的画布。

<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同样的结果。

Answer 1

尝试将第一个画布定位为绝对画布，将第二个画布定位为相对画布，如

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

如何动态地将2个画布附加到文档中以使它们重叠？

1 个答案: