Question

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var rw = 50;
var rh = 50;
var x = 10;
var y = 10;

for (x=10, y=10; y<240; x=x+60, y=y+57) {
  ctx.fillStyle = "orange";
ctx.fillRect(x,y,rw,rh);
}
  for (x=10, y=67; y<240; x=x+60, y=y+57) {
ctx.fillStyle = "orange";
ctx.fillRect(x,y,rw,rh);
}

  for (x=10, y=124; y<240; x=x+60, y=y+57) {
ctx.fillStyle = "orange";
ctx.fillRect(x,y,rw,rh);
}

  for (x=10, y=181; y<240; x=x+60, y=y+57) {
ctx.fillStyle = "orange";
ctx.fillRect(x,y,rw,rh);
}

  for (x=10, y=238; y<240; x=x+60, y=y+57) {
ctx.fillStyle = "orange";
ctx.fillRect(x,y,rw,rh);
}

这是一个javascript代码。在我的HTML中是这个

<canvas id="myCanvas" height="300" width="450" style="border: 1px solid black"></canvas>

我的任务是，将这段代码放在一个循环下面。

非常感谢你的帮助！

Answer 1

尝试使用此功能的简写。在您的代码中，只有y部分正在改变其余部分是相同的。因此，您可以创建一个函数并将y作为参数传递给它。

＆＃13;

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

function fillRect(y, rw = 50, rh = 50) {
   for(var x = 10; y < 240; x += 60, y += 57) {
      ctx.fillStyle = "orange";
      ctx.fillRect(x,y,rw,rh);
   }
}

for (const y of [10, 67, 124, 181, 238]) {
    fillRect(y);
}

＆＃13;

<canvas id="myCanvas" height="300" width="450" style="border: 1px solid black"></canvas>

＆＃13;

Answer 2

据我了解，您可以执行以下操作：

创建一个嵌套循环，并根据迭代设置ngx_http_lua_module的初始值。
为增量因子创建一个变量并使用它。这将使将来很容易改变。
虽然这很小，但您可以将y和x的声明移到for循环中，因为您要在每个for循环中初始化它。如果您将来切换到ES6，这将非常有用。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

var rw = 50;
var rh = 50;
var xFactor = 60;
var yFactor = 57;
var noOfItems = 5;

for (var i = 0; i < noOfItems; i++) {
  for (var x = 10, y = 10 + (i * yFactor); y < 240; x += xFactor, y += yFactor) {
    ctx.fillStyle = "orange";
    ctx.fillRect(x, y, rw, rh);
  }
}

Answer 3

这可以更短。但看起来像嵌套循环需要：

JSON.parse

对于每一行，绘制列每个列对象，步骤x坐标60，y坐标行* 57;这种方式是你要绘制的每一行，x将在前一列增加，y对于一行将保持相同。

Answer 4

你可以在循环之外移动ctx.fillStyle并采用一个嵌套循环，只对每个元素/矩形进行计数，并将该值与绘制位置的因子一起使用。

你想要5行点，从第一行的一个点开始，直到你在最后一行达到5个点。

对于这种方法，你可以采用两个嵌套循环，行/ y值的外部和列/ x值的内部。

为了获得正确的位置，您可以应用因子和给定的偏移量。

＆＃13;

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d'),
    rw = 50,
    rh = 50,
    x = 10,
    y = 10,
    i, j;

ctx.fillStyle = "orange";

for (j = 0; j < 5; j++) {
    for (i = 0; i <= j; i++) {
        ctx.fillRect(x + i * 60, y + j * 57, rw, rh);
    }
}

＆＃13;

<canvas id="myCanvas" height="300" width="450" style="border: 1px solid black"></canvas>

＆＃13;

如何缩短此代码？是否可以在一个循环中创建它？

4 个答案: