javascript - 根据父 div 的 Canvas 数量调整 Canvas 大小

Question

我有一个特定尺寸的视口(viewport)。目前，我只展示了一张在 html5 Canvas 上绘制的图像。但现在我需要显示多个 Canvas ，范围从 1 到 6。 要求是根据 Canvas 的数量调整 Canvas 的大小，使其适合父 div。

例如:单个 Canvas 应占父 div 的 100%，2 个 Canvas 应占 50-50%。因此，对于 6 block Canvas ，它将是 2 行，每行 3 block Canvas 。

此外，用户可以切换显示/隐藏某些 Canvas ，这样他们就必须重新排列。

我该怎么做呢？我正在使用 angularjs、javascript 和 html5 css3。

Answer 1

查看 CSS Flexbox，它可以自动调整大小并自动排列容器 div 中的多个 Canvas 。

• CSS-Tricks 具有出色的 overview of Flexbox

• Wes Bos 做了一个非常好的系列 video tutorials of Flexbox

Flexbox 学习起来很容易。

将您的 div 声明为 Flexbox 容器:

#theDiv{ display: flex; }

然后告诉 Flexbox 你希望如何显示你的 Canvas 元素:

#theDiv{ flex-flow: row wrap; }

您没有详细说明当容器 div 调整大小时或用户隐藏/显示 Canvas 时您希望 Canvas 如何增长/缩小，但是 Flexbox 具有增长/收缩设置，您可以将其应用于所有 Canvas 元素甚至到特定 Canvas 。