所以我有 2 幅 Canvas - 一大一小在大 Canvas 上。 我的问题是如何以最简单和更好的方式将大 Canvas 居中并与他一起移动小 Canvas ,以便它可以再次位于左上角,就像我将主 Canvas 居中之前一样。
这是我的代码:
HTML:
<div id="canvas-container">
<canvas id="projectGame" width="800" height="800"></canvas>
<canvas id="popUp" width="150" height="200"></canvas>
</div>
CSS:
#canvas-container {
position: relative;
}
#projectGame {
position: absolute;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 3;
}
#popUp {
position: absolute;
z-index: 4;
border: 5px solid #000000;
}
提前致谢:)
最佳答案
首先,把宽度和高度放在容器上:
#canvas-container {
position: relative;
width: 800px;
height: 800px;
}
<div id="canvas-container">
<canvas id="projectGame"></canvas>
<canvas id="popUp" width="150" height="200"></canvas>
</div>
然后使主 Canvas 成为容器的 100%:
#projectGame {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #000000;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index: 3;
}
然后将弹出窗口的左上角设置在你想要的相对位置:
#popUp {
position: relative;
top: 150px;
left: 150px;
z-index: 4;
border: 5px solid #000000;
}
现在,当您想要移动/居中/任何 Canvas 时移动整个容器,而不是仅仅移动/居中一个 Canvas 。
关于css - 如何移动 Canvas 以及居中的 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20891216/