p5.js中使用for循环绘制水平线结果异常求助

现有问题 #

• 代码结构错误：所有绘图逻辑直接写在全局作用域，会在画布创建完成前执行，导致绘图指令失效，需全部挪到setup函数内部。
• 线段参数错误：水平线的核心特征是两个端点的y坐标完全一致，你当前使用的line(x * space + 250, x * space + 170, y * space + 400, y * space + 170)中，两个端点的y值分别绑定了x、y循环变量，自然无法输出水平效果。
• 循环逻辑冗余：绘制整行连续的水平线仅需单层循环控制y轴位置即可，不需要双层嵌套循环。

修正后完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script>
function setup() {
  createCanvas(1000, 1000);
  const space = 30;

  background("lightblue");
  rect(270, 170, 260, 165);
  line(30, 20, 85, 75);
  line(250, 170, 510, 170);

  // 绘制10条连续水平线，行间距为space
  for (let i = 1; i <= 10; i++) {
    const lineY = 170 + i * space;
    // 水平线左右端点y坐标完全相同
    line(250, lineY, 510, lineY);
  }
}
</script>

可选：分段水平短线实现 #

如果你需要的是每行多段的水平短线，可替换循环部分为如下双层循环逻辑：

// 共10行，每行10段短水平线
for (let row = 0; row < 10; row++) {
  const lineY = 170 + row * space;
  for (let col = 0; col < 10; col++) {
    const startX = 250 + col * space;
    // 单段短横线长度为15
    line(startX, lineY, startX + 15, lineY);
  }
}

内容的提问来源于stack exchange，提问作者grammamoocow