Question

我正在用JavaScript创建一个程序，该程序需要一个数字，将其转换为二进制，然后根据它们对应于二进制数中的一个还是零来填充一系列单元格。我开始创建机制。

要使用此代码一次填写多个单元格：

function init() {
  canvas = document.getElementById("display");
  ctx = canvas.getContext('2d');
  draw();
}

function draw() {
  for (var x = 0; x += 25; x < 250) {
    for (var y = 0; y += 25; y < 250) {
      if (y % 2 == 0) {
        ctx.fillStyle = "rgb(0, 0, 0)";
      } else {
        ctx.fillStyle = "rgb(255, 255, 255)";
      }
      ctx.fillRect(x, y, 25, 25);
    }
  }
}


window.onload = init;

这似乎是一种非常糟糕的方法。这会导致某些单元格无法填充，使程序非常缓慢，并完全停止运行。我能想到的唯一替代方法是数百行ctx.fillRect()。有没有更好的方法来填充许多矩形？

Answer 1

这是因为您的代码中存在无限循环。

请记住，for循环的语法是：

for(variable;condition;variable-change) {
//block of code
}

您切换了condition和variable-change段，使其成为无穷大，因为x += 25不是可以评估为true或false的条件。相反，它将始终为true，因为您只是在为变量分配新值。

用html5 canvas创建很多rect

1 个答案: