javascript - 错误 Javascript：未捕获的类型错误：无法读取未定义的属性“0”

Question

当我运行它时，它说

未捕获的类型错误：无法读取未定义的属性“0”。

我不知道如何解决这个问题。

帆布：<canvas id="c" style="background-color: black;">

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

c.width = window.innerWidth;
c.height = window.innerHeight;

var grid = [];

for (var j = 0; j < c.height; j++) {
  grid.push([]);
  for (var i = 0; i < c.width; i++) {
    grid[j].push(0);
  }
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);

  for (var j = 0; j < grid.length; j++) {
    for (var i = 0; i < grid[0].length; i++) {
      ctx.fillStyle = (grid[i][j] == 0) ? 'red' : 'blue';
      ctx.fillRect(i, j, 1, 1);
    }
  }
}

//setInterval(draw, 10);
draw();

<canvas id="c" style="background-color: black;">

标签： javascripthtml

Answer 1

您应该grid.length在grid[0].length内部 for 循环中添加。

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

c.width = window.innerWidth;
c.height = window.innerHeight;

var grid = [];

for (var j = 0; j < c.height; j++) {
  grid.push([]);
  for (var i = 0; i < c.width; i++) {
    grid[j].push(0);
  }
}

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);

  for (var j = 0; j < grid.length; j++) {
    for (var i = 0; i < grid.length; i++) {
      ctx.fillStyle = (grid[i][j] == 0) ? 'red' : 'blue';
      ctx.fillRect(i, j, 1, 1);
    }
  }
}

//setInterval(draw, 10);
draw();

<canvas id="c" style="background-color: black;">