JavaScript中如何将矩形存入二维数组？语法适配求助

嘿，我来帮你搞定这个问题！从你之前的代码和描述来看，你习惯了其他语言里直接把图形对象存入二维数组的方式，但JavaScript的语法和Canvas的绘制逻辑有点不一样，咱们一步步来调整～

1. 先纠正你的代码语法错误 #

你的原始代码里有两个关键问题：

• JavaScript不支持var box[][]这种二维数组声明方式，得先创建外层数组，再逐个初始化内层数组；
• JS没有内置的rect构造函数，所以new rect(...)会直接报错，咱们可以用自定义对象来存储每个矩形的关键绘制参数。

2. 正确创建二维数组并填充矩形数据 #

我们不需要存“矩形对象”，而是存储绘制矩形需要的位置、尺寸参数（因为Canvas是即时绘制的，没有内置的图形实例）。每个矩形可以用一个包含x, y, w, h的对象来表示：

var cnv = document.getElementById("canvas");
var ctx = cnv.getContext('2d');
var width = cnv.width;
var height = cnv.height;
var size = 10;

// 计算网格的行列数（取整避免小数问题）
var cols = Math.floor(width / size);
var rows = Math.floor(height / size);

// 初始化二维数组
var box = [];
for (var i = 0; i < rows; i++) {
  box[i] = []; // 为每一行创建一个空数组
}

// 把每个矩形的参数填充到二维数组中
for (var i = 0; i < rows; i++) {
  for (var j = 0; j < cols; j++) {
    // 根据行列索引计算矩形的位置
    box[i][j] = {
      x: j * size,
      y: i * size,
      w: size,
      h: size
    };
  }
}

3. 编写绘制函数，遍历数组绘制矩形 #

接下来写drawGrid函数，遍历二维数组里的矩形数据，用Canvas的API绘制出所有矩形：

function drawGrid() {
  // 先清空画布，避免重复绘制
  ctx.clearRect(0, 0, width, height);
  
  // 遍历二维数组，逐个绘制矩形
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      var rect = box[i][j];
      // 设置网格线颜色
      ctx.strokeStyle = "#ccc";
      // 绘制矩形边框
      ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
      
      // 如果需要填充矩形颜色，可以添加以下两行
      // ctx.fillStyle = "#f5f5f5";
      // ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
    }
  }
}

// 调用绘制函数
drawGrid();

完整可运行代码 #

把所有部分整合起来，就是一个可以直接运行的示例：

<canvas id="canvas" width="400" height="300"></canvas>

<script>
var cnv = document.getElementById("canvas");
var ctx = cnv.getContext('2d');
var width = cnv.width;
var height = cnv.height;
var size = 10;

var cols = Math.floor(width / size);
var rows = Math.floor(height / size);

var box = [];
for (var i = 0; i < rows; i++) {
  box[i] = [];
}

for (var i = 0; i < rows; i++) {
  for (var j = 0; j < cols; j++) {
    box[i][j] = {
      x: j * size,
      y: i * size,
      w: size,
      h: size
    };
  }
}

function drawGrid() {
  ctx.clearRect(0, 0, width, height);
  
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      var rect = box[i][j];
      ctx.strokeStyle = "#ccc";
      ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
    }
  }
}

drawGrid();
</script>

额外小提示 #

如果之后你想修改某个矩形的样式（比如改成红色填充），直接修改数组里的对象即可，比如：

// 修改第3行第4列的矩形颜色
box[2][3].fillColor = "red";

然后在drawGrid函数里添加判断：

if (rect.fillColor) {
  ctx.fillStyle = rect.fillColor;
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
}

内容的提问来源于stack exchange，提问作者Robot2425