Question

为什么此代码显示相同位置的画布？所以我的意思是，如果显示器是平面（x，y），那么它们就会出现在彼此的顶部，然后是顶部＆＃39;将指z轴方向。那不是我想要的。

关于y轴，我想在第一个下面有第二个。你能帮忙吗？

<body>
    <div id="container1">
        <canvas id="canvas1" width="200" height="200">Get a new browser!</canvas>
        <script>
            var canvas = document.querySelector('#canvas1');
            var context = canvas.getContext('2d');

            var img = new Image();
            img.src = "pic.jpg";

            img.onload = function(){
                console.log("Loaded img...")
                context.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
        </script>
    </div>
    <div id="container2">
        <canvas id="canvas2" width="200" height="200">Get a new browser!</canvas>
        <script>
            var canvas2 = document.getElementById('canvas2');
            var context2 = canvas2.getContext('2d');
            context2.fillStyle="red";
            context2.fillRect(21, 21, 100, 100);
        </script>
    </div>
</body>

和css：

#container1{
    position: absolute;
    top: 0;
    left: 0;
}

#container2{
    position: absolute;
    top: 200;
    left: 0;
}

谢谢！

定位两个单独的画布，怎么样？

0 个答案: