javascript - 如何使 HTML Canvas 适合屏幕，同时保持宽高比而不切断 Canvas ？

Question

我正在使用 HTML Canvas 和 javascript 制作游戏。我的 Canvas 尺寸为 1280 x 720 像素(16:9 比例)。我希望我的游戏能够全屏显示，如果屏幕比例不是 16:9，则显示黑条。

如果我这样做:

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

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

如果我这样做:

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

然后 Canvas 保持正确的宽高比，但如果屏幕宽于 16:9，它就会被切断，我也不希望这样。

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

谢谢

Answer 1

首先，正如评论中所述，canvas 是一个替换级别元素。因此，可以将 object-fit 应用于它，就像用于此演示的图像一样。

解决方案从“包装器”(div.fullscreen) 开始。通过使用以下方法定位此元素以填充整个视口(viewport): position:fixed; inset: 0; (inset: 0; = 上、右、下、左:0 尚未完全支持: https://developer.mozilla.org/en-US/docs/Web/CSS/inset )。

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

最后但并非最不重要的一点是我们使用 display: flex;调整内容:居中； 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>