createCanvas(400, 400);

}

​

function draw() {background(220);

  for(x=0;x<=width;x=x+50){ellipse(x,x,20)}

}

​

// 这里使用了 for loop，循环的每次迭代都包含两个主要步骤：

// 1. 初始化部分： 在第一次进入循环之前执行，用于初始化循环控制变量。在这里，初始化部分是 let x = 0;，它将创建一个变量 x 并将其初始化为 0。

// 2. 条件部分： 在每次迭代开始前进行判断，如果条件为真，则继续执行循环体；如果条件为假，则退出循环。在这里，条件部分是 x <= width，表示只要 x 的值小于或等于画布的宽度，就继续执行循环。

// 3. 迭代部分： 在每次迭代结束后执行，用于更新循环控制变量的值。在这里，迭代部分是 x = x + 50，表示每次迭代结束后，将 x 的值增加 50。

// 在循环体内的代码是在每次迭代中执行的。在这个例子中，循环体内的代码是 ellipse(x, x, 20);，它绘制一个以 (x, x) 为中心的椭圆。

// 整个过程会重复执行，直到 x 的值超过了 width。这样，for 循环就完成了从 x = 0 到 x = width 的一系列迭代，每次迭代都执行了相同的绘图操作。这样就形成了一行沿着对角线排列的椭圆。

​