使画布适合窗口，居中答案

【问题标题】：Fit canvases to window, centred使画布适合窗口，居中
【发布时间】：2019-08-08 14:40:27
【问题描述】：

我正在连续绘制多个 HTML5 画布（1 到 3 个）。他们必须：

彼此相邻对齐
保持它们的纵横比（保持在例如：16:9，并且比例不超出比例）
如果窗口比例不完全匹配，则背景图像应该是可见的。请参见图表。
跨平台

这是我到目前为止的进展： https://codepen.io/p487morgan/pen/qeozxP

var CANVASES = 3;
for (var i = 0; i < CANVASES; ++i) {
    var canvas = document.createElement('canvas');
    canvas.id = "myCanvas"+i.toString();
    canvas.width = 2048;
    canvas.height = 1152;
    var width = 100 / CANVASES;
    canvas.style.width = width.toString() + "%";
}

我不知道 css，而且对我来说如何解决它有太多选择。

我正在尝试遵循这里的一些建议： http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html

..即不使用'resize'事件来改变画布的大小。因此尝试尽可能多地使用 css。

目前我将画布的宽度设置为 div 的百分比。窗口太窄时可以这样做，但当窗口不够高时，画布会被切断，因此需要不同的方法。

另外，我希望画布按照图表居中，我还没有解决这个问题。

哪些 CSS 样式可以帮助我完成任务？

diagrams of what is required

【问题讨论】：

在调整画布大小时坚持使用 JavaScript。如果你使用 CSS 来调整画布的大小，你的图像质量会下降。请注意，您引用的“反模式”文章仍然使用 JavaScript (gl.canvas.width = width) 来调整画布的大小——它只是不听resize 事件来这样做。
谢谢@mfluehr。放置画布的最佳方式是什么？保证金？

标签： html css canvas layout

【解决方案1】：

正如我在评论中提到的，在调整画布大小时坚持使用 JavaScript。如果你使用 CSS 来调整画布的大小，你的图像质量会下降。请注意，您引用的“反模式”文章仍然使用 JavaScript (gl.canvas.width = width) 来调整画布的大小——它只是不听resize 事件来这样做。（请注意，他并没有改变 gl.canvas.style.width 。）

要定位您的画布，请使用 Flexbox。将此 CSS 添加到您的样式中：

/* Note: you should probably
   give your div a class or ID */
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

【讨论】：