Javascript 如何使HTML画布适合屏幕，同时保持纵横比，而不切断画布？

我正在使用HTML画布和javascript制作一个游戏。我的画布是1280 x 720像素（16:9比例）。我想让我的游戏全屏显示，如果屏幕比例不是16:9，则显示黑条

如果我这样做：

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

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

然后我的游戏是全屏玩的，但如果屏幕比例不是16:9，则会拉伸到满屏。我不希望它被拉伸，如果需要的话，我想显示黑色的条

如果我这样做：

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

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

然后画布保持正确的纵横比，但如果屏幕宽度大于16:9，它将被切断，我也不希望这样

我怎样才能做到这一点？我找到的其他答案围绕着在窗口调整大小时更新canvas.width和canvas.height，但我不想调整canvas.width或canvas.height的大小，因为游戏设计为在1280 x 720下运行。当然，我可以根据canvas.width和canvas.height缩放图形，但我想知道不这样做是否可以实现这一点

---

谢谢你

首先，如评论中所述，canvas是一个

替换的级别元素

。因此，

对象拟合

可以应用于它，就像用于此演示的图像一样

解决方案从“包装器”（div.fullscreen）开始。使用以下命令定位此元素以填充整个视口：

position:fixed；插图：0（
插入：0；
=
顶部、右侧、底部、左侧：0
尚未完全支持：）

接下来，我们在这个包装中处理图像（或者在您的案例中是画布），并将
max height
和
max width
设置为
100%
。然后我们使用
对象拟合：contain
使画布保持其纵横比，但填充包装而不被切断

最后但并非最不重要的是，我们使用
display:flex；证明内容：中心；对齐项目：居中
在垂直和水平中心显示画布


正文{
保证金：0；
}
.全屏{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
背景色：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.全屏图像{
对象匹配：包含；
最大高度：100%；
最大宽度：100%；
}

首先，如注释中所述，canvas是一个
替换的级别元素。因此，
对象拟合
可以应用于它，就像用于此演示的图像一样

解决方案从“包装器”（div.fullscreen
）开始。使用以下命令定位此元素以填充整个视口：
position:fixed；插图：0（
插入：0；
=
顶部、右侧、底部、左侧：0
尚未完全支持：）

接下来，我们在这个包装中处理图像（或者在您的案例中是画布），并将
max height
和
max width
设置为
100%
。然后我们使用
对象拟合：contain
使画布保持其纵横比，但填充包装而不被切断

最后但并非最不重要的是，我们使用
display:flex；证明内容：中心；对齐项目：居中
在垂直和水平中心显示画布


正文{
保证金：0；
}
.全屏{
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
背景色：黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.全屏图像{
对象匹配：包含；
最大高度：100%；
最大宽度：100%；
}

canvas是一个
替换的级别元素
。因此，
对象拟合
可以应用于它。您查看的对象匹配的详细信息：contain画布是一个
替换的级别元素
。因此，
对象拟合
可以应用于它。您查看的对象匹配的详细信息：contain我不知道object fit属性，它就像我想要的那样工作！谢谢不过要小心，当你改变对象匹配度时，计算鼠标相对于画布内容的位置会变得单调乏味，这对游戏来说并不是一个很好的建议，在游戏中，计算正确的图像尺寸也会允许渲染不大于显示的尺寸（更好的性能）。我不知道对象匹配属性，它就像我想要的那样工作！谢谢不过要小心，当你改变对象的适合度时，计算鼠标相对于画布内容的位置会变得很乏味，这对游戏来说并不是一个很好的建议，在游戏中，计算正确的图像尺寸也不会使渲染比显示的更大（性能更好）。