打字稿中的递归未定义

我在组件内使用画布对象来生成图表。为了使其动画化，我递归地调用该方法。我不断收到错误消息，指出该方法未定义。不确定我需要如何构建它。

任何帮助表示赞赏。

 // Animate function
protected animate(draw_to) {
// Clear off the canvas
this.ctx.clearRect(0, 0, this.width, this.height);
// Start over
  this.ctx.beginPath();
// arc(x, y, radius, startAngle, endAngle, anticlockwise)
// Re-draw from the very beginning each time so there isn't tiny line spaces between each section (the browser paint rendering will probably be smoother too)
  this.ctx.arc(this.x, this.y, this.radius, this.start, draw_to, false);
// Draw
  this.ctx.stroke();
// Increment percent
  this.curr++;
// Animate until end
  if (this.curr < this.finish + 1) {
    // Recursive repeat this function until the end is reached
    requestAnimationFrame(function () {
      error happens here >>> this.animate(this.circum * this.curr / 100 + this.start);
    });
  }
}

您需要使用箭头函数在提供给 requestAnimationFrame 的函数中保持相同的上下文。

requestAnimationFrame(() => {
      error happens here >>> this.animate(this.circum * this.curr / 100 + this.start);
    });