如何在保持宽高比而不切断 canvas 的同时使 HTML canvas 适合屏幕？

Question

我正在使用 HTML canvas 和 javascript 制作游戏。我的 canvas 是 1280 x 720 像素（16:9 比例）。我希望我的游戏全屏显示，如果屏幕比例不是 16:9.

，则显示黑条

如果我这样做：

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

然后我的游戏全屏播放，但如果屏幕比例不是 16:9，则会拉伸以填满屏幕。我不希望它被拉伸，我想在需要时显示黑条。

如果我这样做：

canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

然后 canvas 保持正确的纵横比，但如果屏幕比 16:9 宽，它会被截断，我也不希望这样。

我怎样才能做到这一点？我发现的其他答案围绕 window 调整大小更新 canvas.width 和 canvas.height，但我不想调整 canvas.width 或 canvas.height 大小，因为游戏旨在在 1280 x 720 下工作。当然我可以根据 canvas.width 和 canvas.height 缩放绘图，但我想知道如果不这样做是否可以实现。

谢谢

Answer 1

首先如评论中所述，canvas 是 replaced-level element。因此 object-fit 可以像用于此演示的图像一样应用于它。

解决方案以“包装器”(div.fullscreen) 开始。通过使用以下元素定位此元素以填充整个视口：position: fixed; inset: 0;（inset: 0; = top, right, bottom, left: 0 尚未完全支持：https://developer.mozilla.org/en-US/docs/Web/CSS/inset）。

接下来我们在这个包装器中处理图像（或您的情况下的 canvas）并将 max-height 和 max-width 设置为 100%。然后我们使用 object-fit: contain; 让 canvas 保持其纵横比但填充包装器而不被切断。

最后但同样重要的是，我们使用 display: flex; justify-content: center; align-items: center; 在垂直和水平居中显示 canvas。

body {
  margin: 0;
}

.fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen img {
  object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

<div class="fullscreen">
  <img src="https://via.placeholder.com/1280x720.jpg">
</div>

如何在保持宽高比而不切断 canvas 的同时使 HTML canvas 适合屏幕？

How to fit HTML canvas to screen while maintaining aspect ratio and not cutting off the canvas?

html

javascript

css

canvas