Question

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

我在这里有一个小提琴我当前的进步：http://jsfiddle.net/z3wsxa8j/

正如你所看到的，它们是对角线的。我理解为什么，因为X和Y不断将+ 40px添加到它们的坐标。如果我删除yvalue += 40;部分，显然它们都在同一行。我不知道在达到10个矩形之后我怎么能优雅地让它们再行。我尝试使用if/else语句，所以当有11个矩形时，将其设为my_context.fillRect(xvalue,40,20,20); ... 如果它是21个矩形
my_context.fillRect(xvalue,80,20,20);等等。但是这会导致很多if语句和B）它甚至不起作用（它们仍然印在同一行上）。

感谢任何提示，谢谢！

Answer 1

每10个方格，你需要做两件事：

增加＆＃34; y＆＃34;值向下移动到下一行，
设置＆＃34; x＆＃34;值回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;
    }
}

当＆＃34; x＆＃34;时，(x+1) % 10的值为0是9,19,29等。

Answer 2

尝试使用嵌套for循环：

var canvas = document.getElementById("canvas");
var my_context = canvas.getContext('2d');
my_context.strokeStyle = "white"; // Draws the canvas border
my_context.rect(0, 0, 1000, 1000);
my_context.stroke();
my_context.fillStyle = "white";

var step = 40;
for (var x = 0; x <= 10; x++) {
    for(var y = 0; y <= 10; y++) {
        my_context.fillRect(x*step, y*step, 20, 20);
    }
}

此代码逐列绘制矩形。这是fiddle.

Answer 3

您可以使用单个if语句和变量来完成此操作，以跟踪连续绘制的框的数量。当绘制10个框时，重置计数并递增y值。

更新小提琴：Demo

var canvas = document.getElementById("canvas");
var my_context = canvas.getContext('2d');
my_context.strokeStyle = "white"; // Draws the canvas border
my_context.rect(0, 0, 1000, 1000);
my_context.stroke();
my_context.fillStyle = "white";

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

Answer 4

基本上使用一个内部循环开始使用一个轴10个绘图，并使用40px shiftign为另一个轴重复绘制，重复10次JS Fiddle

注意：在您的代码中，(var x = 0; x <= 10; x++)这将绘制11个矩形而不是10个，因为您从0开始并以10结束，因此它应该是(var x = 0; x < 10; x++)而不是<=

＆＃13;

var canvas = document.getElementById("canvas");
var my_context = canvas.getContext('2d');
my_context.strokeStyle = "white"; // Draws the canvas border
my_context.rect(0, 0, 1000, 1000);
my_context.stroke();
my_context.fillStyle = "white";

var xvalue = 0;
var yvalue = 0;

for (var y = 0; y < 10; y++) {
  for (var x = 0; x < 10; x++) {
    my_context.fillRect(xvalue, yvalue, 20, 20);
    xvalue += 40;
  }
  xvalue = 0;
  yvalue += 40;
}

＆＃13;

body {
  background-color: gray;
  margin: 0px;
  overflow: hidden;
}

＆＃13;

<body>
  <canvas id="canvas" width="1000" height="1000"></canvas>
</body>

＆＃13;

Answer 5

只需使用x和y循环而不是一个大循环：

for (var x = 0; x <= 10; x++) {
    for (var y = 0; y <= 10; y++) {
        my_context.fillRect(x*40, y*40, 20, 20);
    }
}

Answer 6

正如其他人所说，你可以在for循环中有一个for循环，这样你就先增加每一行，然后递增每一列。

http://jsfiddle.net/z3wsxa8j/10/

var canvasSize = 1000;
var blockSize = 20;
var numBlocks = canvasSize/blockSize;

// Outer loop for each columns
for (var i = 0; i < numBlocks; i++) {
  xvalue = 0;
  yvalue = blockSize*i;

  // Inner loop for the rows
  for (var j = 0; j < numBlocks; j++) {
    my_context.fillRect(xvalue, yvalue, blockSize, blockSize);
    xvalue += blockSize;        
  }
}

JS：如何创建一个10x10的填充矩形网格？

6 个答案: