css - 如何移动 Canvas 以及居中的 Canvas

Question

所以我有 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;
}

提前致谢:)

Answer 1

首先，把宽度和高度放在容器上:

#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 。