保持两个画布并排改变纵横比

Question

我正试图在 Chrome 上并排显示两个 canvases（左边是 gameScreen，右边是 scoreScreen）。无论屏幕 size/aspect 比例如何，我都希望这些 canvases 保持并排。下面是我的 HTML 和 CSS:

HTML:

<body>
    <canvas id="gameScreen" width="600" height="600"></canvas>
    <canvas id="scoreScreen" width="300" height="600"> </canvas>
</body>

CSS:

#gameScreen {
    border: 1px solid black;
}

/* #scoreScreen {
            border: 1px solid black;
          } */

html,
body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}

这适用于 1024x600 大小的屏幕，但随着屏幕尺寸越来越大，左侧 canvas（游戏屏幕）开始与右侧 canvas 重叠。我试图用 div 标签包装两个 canvases 并为 div 标签分配一个相对位置，但是，我无法让它工作。

Answer 1

使用标签父灵活性规则<canvas>。添加 display: flex 和规则 gap 以省略 <body> 标签。

<canvas> 标签将始终并排，无论屏幕尺寸如何。

html,
body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    /*display: table-cell;
        vertical-align: middle;*/
    display: flex;
    gap: 8px;
}

#gameScreen {
    border: 1px solid black;
}

#scoreScreen {
    border: 1px solid black;
}

<body>
    <canvas id="gameScreen" width="600" height="600"></canvas>
    <canvas id="scoreScreen" width="300" height="600"> </canvas>
</body>

保持两个画布并排改变纵横比

Keep two canvases side by side with changing aspect ratio

html

css

canvas

alignment