Question

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

Answer 1

正如我的评论中所述，在调整画布大小时，请坚持使用JavaScript。如果使用CSS调整画布大小，则图像质量会下降。请注意，您引用的“ Anti-Patterns”文章仍然使用JavaScript（gl.canvas.width = width）来调整画布的大小—只是不监听resize事件。（请注意，他没有更改gl.canvas。样式 .width。）

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

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

使画布适合窗口，居中

1 个答案: