JavaScript绘图函数报错value.pos[i] is undefined的解决求助

你遇到的value.pos[i] is undefined错误，核心原因是处理tipo:"m"的对象时，错误地借用了外部数组的索引i来访问当前对象的pos数组元素。

看你原代码里的这段逻辑：

if (value.tipo === "m") {
  c.moveTo(value.pos[i][0], value.pos[i][1]);
  console.log(value.pos);
}

这里的i是遍历数组T1时的下标（比如第三个元素的i=2），但每个tipo:"m"对象的pos数组长度只有1（[[0,0]]），所以value.pos[2]肯定不存在，直接抛出undefined错误。

而你的预期是每个tipo:"m"对象要执行moveTo操作，用自身pos数组里的坐标——这其实和其他类型（b/l/q等）的处理逻辑是一致的，应该遍历当前对象的pos数组，而不是依赖外部的索引。

下面是修正后的caminho函数：

function caminho(c, a) {
  c.beginPath();
  a.forEach(function(value) {
    if (value.tipo === "m") {
      // 和其他类型保持一致：遍历当前对象的pos数组，逐个执行moveTo
      value.pos.forEach(function(pos) {
        c.moveTo(pos[0], pos[1]);
      });
    } else if (value.tipo === "l") {
      value.pos.forEach(function(pos) {
        c.lineTo(pos[0], pos[1]);
      });
    } else if(value.tipo === "q") {
      value.pos.forEach(function(pos) {
        c.quadraticCurveTo(pos[0], pos[1], pos[2], pos[3]);
      });
    } else if(value.tipo === "a") {
      value.pos.forEach(function(pos) {
        c.arc(pos[0],pos[1],pos[2],pos[3],pos[4]);
      });
    } else if(value.tipo === "b") {
      value.pos.forEach(function(pos) {
        c.bezierCurveTo(pos[0],pos[1],pos[2],pos[3],pos[4],pos[5]);
      })
    }
  });
  c.closePath();
}

修正说明： #

1. 移除了forEach循环中的i参数，因为处理每个对象的pos时完全不需要依赖外部数组的索引
2. 把tipo:"m"的处理逻辑改成和其他类型一致的value.pos.forEach，确保每个pos数组里的坐标都能被正确读取和使用

用你的T1数组调用这个修正后的函数，会完全复现你预期的绘图逻辑：

c2d.beginPath();
c2d.moveTo(0, 0);
c2d.bezierCurveTo(0,0.223,0.1,0.5,0.11,0.5);
c2d.moveTo(0, 0);
c2d.closePath();

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