html - 使 Canvas 适合窗口，居中

Question

我正在连续绘制多个 HTML5 Canvas (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

..即不使用“调整大小”事件来更改 Canvas 的大小。 因此尽量使用 css。

目前我将 Canvas 的宽度设置为 div 的百分比。 当窗口太窄时这没问题，但当它不够高时， Canvas 会被切断，因此需要不同的方法。

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

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

diagrams of what is required

Answer 1

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

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

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