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

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

我对目前的进展有点不太了解：

如你所见，它们成对角线。我明白为什么，因为X和Y的坐标一直增加+40px。如果我删除

yvalue+=40if/else

语句，因此当有11个矩形时，将其设置为

my_context.fillRect（xvalue，40,20,20）。。。
如果是21个矩形

my_context.fillRect（xvalue，80,20,20）等等。
但这将导致A）如果
语句出现大量的

，B）甚至不起作用（它们仍然打印在同一行上）

---

任何提示都将不胜感激，谢谢

每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;
    }
}

for（变量x=0；x<100；x++）{
my_context.fillRect（xvalue，yvalue，20,20）；
xvalue+=40；
如果（（x+1）%10==0）{
Y值+=40；
xvalue=0；
}
}

---

当“x”为9、19、29等时，

（x+1）%10的值将
0
。
尝试使用嵌套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);
    }
}

var canvas=document.getElementById（“canvas”）；
var my_context=canvas.getContext（'2d'）；
my_context.strokeStyle=“白色”//绘制画布边框
my_context.rect（0,0,1000,1000）；
我的上下文.stroke（）；
my_context.fillStyle=“白色”；
var阶跃=40；
对于（var x=0；x您可以使用单个if语句和一个变量来跟踪一行中绘制的框数。绘制10个框时，重置计数并增加y值

更新小提琴：

var canvas=document.getElementById（“canvas”）；
var my_context=canvas.getContext（'2d'）；
my_context.strokeStyle=“white”//绘制画布边框
my_context.rect（0,0,1000,1000）；
我的上下文.stroke（）；
my_context.fillStyle=“白色”；
var xvalue=0；
var-yvalue=0；
var=1；
对于（变量x=0；x 10）{
盒子=1；
xvalue=0；
Y值+=40；
}
box++；
my_context.fillRect（xvalue，yvalue，20,20）；
xvalue+=40；
}
基本上，使用一个内循环开始绘制一个轴10个矩形，然后使用
40px
移动另一个轴，重复10次

注意：在代码中有
（var x=0；x只需使用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);
    }
}

for（var x=0；x正如其他人所说，在for循环中可以有一个for循环，这样您可以先增加每一行，然后增加每一列


var canvasSize=1000；
var块大小=20；
var numBlocks=画布大小/块大小；
//每个列的外部循环
对于（变量i=0；i
Basic math to the rescue.10*20=200。一旦达到200宽度，将左偏移量重置为0，并将顶部偏移量增加20。
var height=20；var width=20；for（var y=0；y）这是一个工作版本：是的，这也可以！
for (var x = 0; x <= 10; x++) {
    for (var y = 0; y <= 10; y++) {
        my_context.fillRect(x*40, y*40, 20, 20);
    }
}

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;        
  }
}