p5.js入门学习-嵌套循环

在一个循环体语句中包含着另一个循环语句，被称为循环嵌套。内嵌的循环中还可以嵌套循环，这就是多层循环。各种语言中关于循环的嵌套的概念都是一样的。最常见的应用就是之前我们所做过的案例，遍历二维数组。

function setup() {
  // 画布：720 * 360
  createCanvas(720, 360);
  background(0);
  noStroke();
  noLoop();
}
function draw(){
  // 定义栅格大小
  let gridSize = 35;
  // 通过嵌套循环在二维平面内等距绘制一个小矩形，并与画布中心连线
  for (let x = gridSize; x <= width - gridSize; x += gridSize) {
    for (let y = gridSize; y <= height - gridSize; y += gridSize) {
      noStroke();
      fill(255);
      // 请思考：为什么矩形的左上角坐标要和x与y两个循环条件有关？
      // 画矩形
      rect(x - 1, y - 1, 3, 3);
      stroke(255, 50);
      // 与画布中心连线
      line(x, y, width / 2, height / 2);
    }
  }
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)