如何将a5.json数据存入rects变量并绘制Canvas矩形？变量赋值排查

1. 当前代码中JSON数据的变量存储问题 #

你当前代码里的json变量是硬编码的本地数据，完全没有用到你想要加载的a5.json文件。虽然var rects = json这个赋值操作本身合法（只是把json的引用传给rects），但从你的需求角度看，这个操作不符合预期。另外，你用<script src="a5.json" defer></script>加载JSON文件的方式是错误的——浏览器会把JSON当作JavaScript代码解析，而纯JSON格式不符合JS语法，会直接触发报错。

2. 正确实现方法（加载a5.json到rects并绘制） #

要实现从a5.json加载数据到rects并绘制，需要通过HTTP请求获取JSON文件，解析数据后赋值给rects，再执行绘制逻辑。同时要注意：JSON里的坐标是字符串类型，必须转成数字（Canvas绘制方法只接受数值参数）。

完整修正代码 #

<canvas id="c" width="500" height="500"></canvas>

<script>
const canvas = document.getElementById("c");
const context = canvas.getContext("2d");
let rects = []; // 初始化rects变量

// 配置Canvas基础样式
context.lineWidth = 2;
context.strokeStyle = "#FF0000";
context.fillStyle = "#FF0000";

// 用fetch请求并解析a5.json
fetch('a5.json')
  .then(response => {
    if (!response.ok) throw new Error('JSON文件请求失败');
    return response.json();
  })
  .then(data => {
    rects = data; // 将解析后的JSON数据赋值给rects
    // 遍历rects绘制矩形，同时转换坐标类型
    rects.forEach(shape => {
      const x = Number(shape.x);
      const y = Number(shape.y);
      const w = Number(shape.w);
      const h = Number(shape.h);
      context[shape.f ? 'fillRect' : 'strokeRect'](x, y, w, h);
    });
  })
  .catch(error => console.error('数据加载出错:', error));
</script>

关键注意事项 #

• 移除错误的<script src="a5.json">标签，改用fetch发起请求
• 确保a5.json是合法JSON格式，示例内容如下：

  [
    {"x": "50", "y": "50", "w": "100", "h": "50", "f": true},
    {"x": "50", "y": "150", "w": "100", "h": "50", "f": false}
  ]
  

• 必须将JSON中的字符串坐标转为数字，否则Canvas会把字符串当作0处理，导致图形无法正常显示
• 绘制逻辑要放在fetch的回调中，确保数据加载完成后再执行绘制

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