JavaScript报错TypeError:a.x is undefined，请求技术帮助

嘿，我来帮你排查下这个错误的问题所在，其实是两个小细节没处理好：

1. 直接导致TypeError: a.x is undefined的原因 #

你在函数里写的是a.x，但a是传入的整个CONTORNO数组啊！数组本身根本没有x属性，x是数组里每一个对象的属性，所以你应该访问当前循环到的元素的x，也就是a[i].x。

2. 隐藏的逻辑错误：重复定义对象属性会被覆盖 #

你看CONTORNO里第二个对象，重复写了N个x:[...]——在JavaScript中，对象的属性名是唯一的，后面的同名属性会直接覆盖前面的，所以这个对象最后实际上只有最后一个x:[0,1]，完全达不到你想连续画多条线的效果。你应该把所有要画的线的坐标放到一个二维数组里，让x成为一个包含多个坐标对的数组。

修正后的完整代码 #

先修正你的CONTORNO定义：

const CONTORNO = [
  { tipo: "m", x: [0, 0] },
  { 
    tipo: "l", 
    x: [
      [0.06, 0], [0.06, 0.04], [0.14, 0.04], [0.14, 0],
      [0.24, 0], [0.24, 0.04], [0.34, 0.04], [0.34, 0],
      [0.44, 0], [0.44, 0.04], [0.54, 0.04], [0.54, 0],
      [0.64, 0], [0.64, 0.04], [0.74, 0.04], [0.74, 0],
      [0.8, 0], [0.8, 1], [0.40, 0.55], [0, 1]
    ] 
  }
];

然后修正你的caminho函数（顺便优化了可读性）：

function caminho(c, a) {
  c.beginPath();
  for (var i = 0; i < a.length; i++) {
    const currentShape = a[i];
    if (currentShape.tipo === "m") {
      // 移动到起始点
      c.moveTo(currentShape.x[0], currentShape.x[1]);
    } else if (currentShape.tipo === "q") {
      // 二次贝塞尔曲线需要控制点和终点坐标
      c.quadraticCurveTo(currentShape.x[0], currentShape.x[1], currentShape.x[2], currentShape.x[3]);
    } else if (currentShape.tipo === "l") {
      // 遍历所有线的坐标，依次画线
      for (var j = 0; j < currentShape.x.length; j++) {
        const [x, y] = currentShape.x[j];
        c.lineTo(x, y);
      }
    }
  }
  c.closePath();
}

// 调用前记得获取canvas上下文哦，比如：
// const canvas = document.getElementById('your-canvas-element');
// const ctx = canvas.getContext('2d');
// caminho(ctx, CONTORNO);

这样修改后，不仅能解决你遇到的undefined错误，还能实现你原本想画连续线条的需求～

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