我的循环会循环，但它不会显示我想要的内容

Question

我有我的数组，我想根据数组中每个对象内部的内容显示数组。我这里有循环，但我似乎可以让ctx.fillRect工作。

var c = document.getElementById("can");
var ctx = c.getContext("2d");
var blocks = [];
var rows = [0, 1, 2, 3];
function Block(h, w, x, y, c) {
  this.h = h;
  this.w = w;
  this.x = x;
  this.y = y;
  this.c = c;
}
ctx.fillRect(900, 400, 10, 10)
for (var i = 0, len = rows.length; i < len; i++) {
  for (var j = 0; j < 10; j++)
    blocks.push(new Block(10, 20, j * 30, i * 30, rows[i]))
}
function draw() {
  ctx.fillStyle = "black";
  for (var i = 0, len = blocks.length; i < len; i++) {
    for (var j = 0, len2 = blocks[i].length; j < len2; j++) {
      ctx.fillRect(blocks[i][j].x, blocks[i][j].y, blocks[i][j].w, blocks[i][j].h);
    }
  }
}
setInterval(draw, 1000);

<canvas id="can" height="500" width="1000"></canvas>

Answer 1

blocks不

是一个多维数组。

var c = document.getElementById("can");
var ctx = c.getContext("2d");
var blocks = [];
var rows = [0, 1, 2, 3];
function Block(h, w, x, y, c) {
  this.h = h;
  this.w = w;
  this.x = x;
  this.y = y;
  this.c = c;
}
for (var i = 0, len = rows.length; i < len; i++) {
  for (var j = 0; j < 10; j++)
    blocks.push(new Block(10, 20, j * 30, i * 30, rows[i]))
}
function draw() {
  ctx.fillStyle = "#000000";
  for (var i = 0, len = blocks.length; i < len; i++) {
      ctx.fillRect(blocks[i].x, blocks[i].y, blocks[i].w, blocks[i].h);
  }
}
setInterval(draw, 1000);

<canvas id="can" height="500" width="1000"></canvas>