基于canvas wrt到父div的数量调整画布大小

Question

我有一个特定维度的视口。目前，我只显示在html5画布上绘制的单个图像。但现在我需要显示多个画布，范围从1-6。 要求是根据画布的数量调整画布的大小，使其适合父div。

例如：单个画布应占100％父div，2画布占50-50％。因此，对于6个画布，它将是2行，每行3个画布。

此外，用户可以切换某些画布的显示/隐藏，以便他们必须重新排列。

我怎么能这样做？我正在使用angularjs，javascript和html5 css3。

Answer 1

查看CSS Flexbox ，它可以在容器div中自动调整和自动排列多个画布。

• CSS-Tricks有一个很好的overview of Flexbox

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

Flexbox在经过一小段学习之后很容易使用。

将您的div声明为Flexbox容器：

#theDiv{ display: flex; }

然后告诉Flexbox您希望如何显示画布项目：

#theDiv{ flex-flow: row wrap; }

您还没有详细说明在调整容器div大小或用户隐藏/显示画布时您希望画布增长/缩小的方式，但Flexbox可以增加/缩小可应用于所有画布项目的设置甚至是特定的画布。