javascript - 使用 for 循环创建 alpha 值最多增加 255 的矩形网格

Question

我创建了一个矩形网格，随着您向下和向右移动，不透明度会增加。我将 256 个 alpha 值平均分为 4 列(每列 64 个矩形)。

我试图通过对每一列使用 for 循环来减少代码。

我已经设法创建了矩形列，但是我设置的 fill() for 没有按照我的需要应用不透明度。

这是我为第 1 列运行的内容:

  for (var a = 0; a < 256; a++) {
    fill(155,0,0,a);
  }

  var y = 0;
  for (var x = 0; y <= 1890; x += 210) {
    for (var y = 0; y <= 1890; y += 30) {
      rect(x,y,200,20)
    }
  }

我试过组合 fill() 和 rect() 循环，但我遇到了同样的问题，即色标固定在 (155,0,0,255) 而不是从 0 开始并上升到 63(为此专栏)。

我总共有 4 个 fill 和 4 个 rect 行(例如，每列 1 个 fill-rect-combo)。

有关网格的完整代码和可视化表示，https://codepen.io/anon/pen/KvdJWB

Answer 1

第一个 for 循环运行并结束，甚至在嵌套的 for 循环开始之前。您可以将您的程序视为等同于此:

  fill(155,0,0,0);
  fill(155,0,0,1);
  fill(155,0,0,2);
  fill(155,0,0,3);
  //...
  fill(155,0,0,254);
  fill(155,0,0,255);


  var y = 0;
  for (var x = 0; y <= 1890; x += 210) {
    for (var y = 0; y <= 1890; y += 30) {
      rect(x,y,200,20)
    }
  }

这很明显，您的第一个 for 循环实际上并没有做太多事情，只有最后一次调用 fill() 才是真正重要的。

如果您希望每个单元格、每一行或每一列都具有不同的颜色，那么您将不得不在嵌套的 for 中调用 fill() > 在某处循环。