JS中CONTORNO数组传递异常，Canvas路径绘制不全问题排查

我一眼就看到两个关键问题导致你只画出了一个点：

1. 数组结构错误：重复属性被覆盖，路径点丢失 #

你在CONTORNO数组里，把所有lineTo的点都塞进了同一个对象里，重复定义了x属性：

{ tipo: "l", x: [0.06, 0], x: [0.06, 0.04], x: [0.14, 0.04], ..., x: [0, 1] }

在JavaScript中，对象里的同名属性会被最后一个值完全覆盖，所以这个对象最终只剩下x: [0, 1]，前面所有的路径点都丢失了。

你的caminho函数是遍历数组的每个元素，每个元素对应一次moveTo或lineTo。原本你期望多个lineTo操作，但实际上数组里只有两个元素：一个"m"类型的起点，一个"l"类型的终点，自然只能画出一条线（或者因为没渲染，看起来像一个点）。

2. 缺少路径渲染步骤：定义了路径但没画出来 #

你的caminho函数里只调用了beginPath()、moveTo()和lineTo()，这些只是在内存里定义了路径的形状，但并没有把路径绘制到画布上。必须调用stroke()（描边）或者fill()（填充）才能让路径显示出来。

修复后的代码示例 #

修正数组结构 #

每个lineTo点都要作为单独的数组元素：

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

修正渲染步骤 #

在调用caminho之后，添加描边操作：

var c = document.getElementById("acanvas").getContext("2d");
caminho(c, CONTORNO);
c.stroke(); // 关键：把定义好的路径画出来

这样修改后，循环就能遍历所有路径点，并且把完整的路径渲染到画布上了。

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