forEach循环中CanvasRenderingContext2D的lineTo未定义错误求助

核心错误原因 #

你遇到的ReferenceError: lineTo is not defined，本质是没有通过Canvas上下文对象（ctx）调用lineTo方法。lineTo是CanvasRenderingContext2D的实例方法，必须通过上下文对象访问，不能直接作为全局函数使用。

另外，如果你尝试传入ctx作为this参数但没用，大概率是用了箭头函数——箭头函数会捕获外层作用域的this，forEach的第二个参数无法改变它的this指向；就算用了普通函数，也得确保在回调里用this.lineTo()而不是直接lineTo()。

正确用法示例 #

错误写法（触发报错） #

const points = [[10,10], [50,50], [100,30]];
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
// 错误：直接调用lineTo，未通过ctx
points.forEach(point => {
  lineTo(point[0], point[1]);
});
ctx.stroke();

写法1：直接用ctx调用（最推荐） #

不需要处理this绑定，写法直观不易出错：

const points = [[10,10], [50,50], [100,30]];
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
points.forEach(point => {
  ctx.lineTo(point[0], point[1]); // 明确通过ctx调用方法
});
ctx.stroke();

写法2：绑定this的正确姿势（普通函数+传入ctx） #

如果一定要用this指代ctx，必须用普通函数，并在forEach第二个参数传入ctx：

const points = [[10,10], [50,50], [100,30]];
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
points.forEach(function(point) {
  this.lineTo(point[0], point[1]); // this此时指向ctx
}, ctx);
ctx.stroke();

⚠️ 注意：箭头函数不能这么用，它的this不受forEach参数影响。

写法3：用for...of替代forEach（更简洁） #

嫌forEach麻烦的话，直接用for...of循环，逻辑更清晰：

const points = [[10,10], [50,50], [100,30]];
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (const point of points) {
  ctx.lineTo(point[0], point[1]);
}
ctx.stroke();

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