javascript - JS : How do I create a 10x10 grid of filled rectangles?

Question

我正在尝试在 10x10 网格中创建 100 个填充矩形。这些矩形中的每一个都是 20px*20px 大，彼此相距 20px。我完全理解它背后的逻辑，以及大致如何将其放入代码中，但有一部分我似乎无法理解；在绘制前 10 个后，我如何使矩形出现在下一行。

我现在的进度有点乱:http://jsfiddle.net/z3wsxa8j/

如您所见，它们沿对 Angular 线移动。我明白为什么，因为 X 和 Y 的坐标不断增加 +40px。如果我删除 yvalue += 40; 部分，它们显然都在同一行。我不知道如何在达到 10 个矩形后优雅地让它们继续排在另一行。我尝试使用 if/else 语句，所以当有 11 个矩形时，将其设为 my_context.fillRect(xvalue,40,20,20); ...如果是21个矩形
my_context.fillRect(xvalue,80,20,20); 等等。但这会 A) 导致很多 if 语句和 B) 它甚至不起作用(它们仍然打印在同一行上)。

感谢任何提示，谢谢!

Answer 1

每第 10 个方格，您需要做两件事:

• 增加“y”值以向下移动到下一行，并且
• 将“x”值设置回 0

此外，您需要确保只做 100 个框而不是 101 个:

for (var x = 0; x < 100; x++) {
    my_context.fillRect(xvalue, yvalue, 20, 20);
    xvalue += 40;
    if ((x+1) % 10 === 0) {
        yvalue += 40;
        xvalue = 0;
    }
}

当“x”为 9、19、29 等时，(x+1) % 10 的值将为 0。