使用forEach绘制Canvas饼图时切片无法渲染的问题咨询

你遇到的问题其实是两个细节错误导致的，咱们一步步拆解：

1. this指向错误 #

在你用普通function作为forEach回调时，函数内部的this默认指向全局对象（浏览器环境下是window），而不是你原来的对象实例。这就导致this.pieLocationX、this.pieLocationY、this.pieRadius这些值都是undefined，Canvas的arc方法拿到无效参数，自然画不出切片。

而普通for循环里的this始终指向当前对象，所以参数都是正确的。

2. 起始角度更新逻辑错误 #

你的forEach代码里写了：

sliceStartAngle += sliceEndAngle

这相当于把起始角度累加了当前的结束角度，正确的逻辑应该是把起始角度设置为上一次的结束角度，和for循环里的sliceStartAngle = sliceEndAngle保持一致。这个错误会导致角度计算完全混乱，就算this的问题解决了，也画不出正确的饼图。

修复后的forEach代码 #

这里提供两种修复this指向的方式，选一种就行：

方式一：使用箭头函数（推荐） #

箭头函数不会绑定自己的this，会继承外层上下文的this：

let sliceStartAngle = 0; 
data.forEach((property) => { 
  let sliceAngle = 2 * Math.PI * property.value / totalValue; 
  let sliceEndAngle = sliceStartAngle + sliceAngle; 
  context.beginPath(); 
  context.moveTo(this.pieLocationX, this.pieLocationY); 
  context.arc(this.pieLocationX, this.pieLocationY, this.pieRadius, sliceStartAngle, sliceEndAngle, false); 
  context.fill(); 
  context.stroke(); // 别忘了补上你漏写的stroke
  context.closePath(); 
  sliceStartAngle = sliceEndAngle; // 修正角度更新逻辑
});

方式二：给forEach指定this参数 #

forEach的第二个参数可以设置回调函数执行时的this指向：

let sliceStartAngle = 0; 
data.forEach(function(property) { 
  let sliceAngle = 2 * Math.PI * property.value / totalValue; 
  let sliceEndAngle = sliceStartAngle + sliceAngle; 
  context.beginPath(); 
  context.moveTo(this.pieLocationX, this.pieLocationY); 
  context.arc(this.pieLocationX, this.pieLocationY, this.pieRadius, sliceStartAngle, sliceEndAngle, false); 
  context.fill(); 
  context.stroke();
  context.closePath(); 
  sliceStartAngle = sliceEndAngle;
}, this); // 这里传入当前对象作为this

这样修改后，forEach的行为就和for循环完全一致了，饼图切片就能正常渲染啦。

内容的提问来源于stack exchange，提问作者Jonathan Wesley Dudzik