时间戳

首页 > 解决方案 > 如何使用 for 循环创建额外的一排方形块

javascript - 如何使用 for 循环创建额外的一排方形块

问题描述

新手在这里和java脚本。我正在尝试创建 5 行和 5 列的方块，但我只能设法创建一行。我可以问我的代码缺少什么吗？感谢帮助。

let x = 0;
let y = 0;
for (let i = 1; i <= 5; i++) {
  y += 0;
    for (let j = 1; j < + 5; j++) {
        drawGridBoard(x, y, 50, 50)
        x = 50;
    }
}

标签： javascriptfor-loop

解决方案

让我们检查一下您的循环。

外循环：

for (let i = 1; i <= 5; i++) {
  y += 0;
}

递增i直到它为 5 并且在每个循环中它递增 y

内循环：

for (let j = 1; j < + 5; j++) {
    drawGridBoard(x, y, 50, 50)
    x = 50;
}

递增j直到它为 5，drawGridBoard使用参数x和y调用，最后将x设置为 50。

如果我们替换drawGridBoard()为，console.log(x,y);我们可以看到发生了什么：

0,0
50,0
50,0
50,0
50,0
50,0

如您所见，x 和 y 将分别保持在 50 和。为什么？因为您不使用 for 循环变量i和j来计算适当的屏幕位置。

每增加一次，j我们希望将 x 位置向右移动 50 个像素

x + j * 50

每增加一次，i我们希望将 y 位置向下移动 50 个像素

y + i * 50

把它们放在一起：

let x = 0;
let y = 0;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

function drawGridBoard(x, y, width, height) {
  ctx.fillRect(x, y, width, height);
}
for (let i = 0; i < 5; i++) {

  for (let j = 0; j < 5; j++) {
    drawGridBoard(x + j * 50, y + i * 50, 50, 50);
  }
}
<canvas id="canvas"></canvas>

推荐阅读