用html5 canvas创建很多rect

Question

I am creating a program in javascript that takes a number, converts it to binary, then fills in a series of cells based on whether they correspond to a one or zero in the binary number. I am starting to create the mechanics.

To fill in many cells at once I am using this code:

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;

This seems to be a very bad way of doing it. It causes some cells not to be filled in, makes the program very slow, and stops it entirely. The only alternative I can think of is hundreds of lines of ctx.fillRect() . Is there a better way of filling in many rectangles?

Answer 1

This is because you have an infinite loop in your code.

Remember, the syntax for for loops is:

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

You switched the condition and variable-change segments, making it be infinite because x += 25 is not a conditional that can be evaluated to true or false . Instead, it will always be true because you are merely assigning a variable a new value.