将一组正方形划分为2的幂的公式是什么？ （JavaScript）的（画布）

Question

最终编辑：成功！

正如我在迈克尔的回答下面的评论中所述，我没有考虑到我将行数乘以正方形宽度的事实。

确定画布大小和排列这些方块的完整正确公式如下：

var canvasWidth = squareWidth * Math.ceil(Math.sqrt(numberOfSquares));

var canvasHeight = squareHeight * Math.ceil(numberOfSquares / (Math.ceil(Math.sqrt(numberOfSquares))));

原帖：

我曾经知道这一点，这很简单，我忽略了但是我现在花了两个小时来做​​这件事，这让我疯了！

假设我在HTML5中有一个canvas元素，我有四个图像/正方形（大小相同）：

[] [] [] []

此时我所知道的只是他们的宽度/高度以及我拥有的方格数量。

当我按照这样排列时，将画布设置为这些方块的大小是什么公式：

[] []

[] []

要清楚，我想知道将会有多少列，将有多少行以及用于包装它们的画布的宽度/高度。

编辑：我忘了提到我正试图让他们掌握两个权力。所以，2,4,8,16,24..etcetc我意识到会有空格，我不关心它们我只是想要调整画布大小来容纳两侧相等的行

我忘记的等式对任意数量的正方形进行排序，无论是奇数，偶数还是仅1

我认为它是这样的：

var canvasWidth = (squareWidth*howManySquares)/2;
var canvasHeight = (squareHeight*howManySquares)/2;

这在一定程度上起作用，但/ 2将只有1个方格的半个画布。 我想我曾经尝试ceil()，但现在我已经完全糊涂了。

提前感谢您提供的任何帮助。

EDIT2：

感谢Michael Lawrie，我越来越接近答案了。

更清楚地了解我所追求的是什么（因为我忘记了有不止一种方法......）我想要Michael Lawrie的第二个建议，在那里我找出了多少次我可以整齐地分割方块制作一个squre-ish矩形画布，尝试删除尽可能多的空插槽。

他的回答是半正确的，但他忘了像这样包括正方形宽度：

 canvasWidth = squareWidth * Math.ceil(Math.sqrt(howManySquares));

这个有用吗（我想？到目前为止我只测试了一些小数字。如果我错了请纠正我），但这只是宽度。

我现在遇到了找高度的问题。复制boxHeight的宽度版本不起作用（正如预期的那样），我调整Michael Lawrie版本的粗制滥造也没有产生任何结果..

所以我仍然被卡住了。到目前为止，感谢你的帮助，几乎得到了它！

Answer 1

假设您总是想要一个正方形，即使该正方形未满，宽度和高度也应为Math.ceil(Math.sqrt(number_of_squares))。如果你想要一个边长不等的矩形，那就稍微复杂了：

var long_side = Math.ceil(Math.sqrt(number_of_squares));
var short_side = Math.ceil(number_of_squares / long_side);

这将为您提供正方形画布的大小。乘以正方形的像素尺寸，得到画布的最终尺寸。