Javascript 画布&x2B；角度5请求动画帧崩溃

我一直试图在Angular v5.2.10中通过在单个组件上使用canvas在画布上设置一些项目的动画，但是requestAnimationFrame出现了问题

对于console.log（）中记录的前4000帧，动画运行平稳。8000帧后，应用程序崩溃。我已经用angula cli v1.6.7生成了一个简单的应用程序，并添加了这个组件，在记录了8000帧后仍然会使应用程序崩溃

我是canvas新手，在Vanillajs中运行了这个应用程序，一切都很好。在Angular上设置画布动画时，我是否遗漏了什么

我感谢您的反馈

这是我的组件的代码。 animation.component.ts：

  @ViewChild('myCanvas') canvas: ElementRef;
  public ctx: CanvasRenderingContext2D;

  width: number = 320;
  height: number = 480;

  frames: number = 0;

  ngAfterViewInit(){
    this.main();
  } 

  main(){
    this.ctx = <HTMLCanvasElement>this.canvas.nativeElement).getContext('2d');
      // run Game
    this.run();
  }

  run(){
    this.update();
    this.render();

    requestAnimationFrame(()=> this.run());
  }

  update(){
    console.log(this.frames);
    this.frames++;
  }

  render(){
   // Image would render here
  }

---

但动画仍会在第8000帧上崩溃。

尽管您没有提到崩溃的细节，但这一定是堆栈溢出。请参阅，您需要一些条件来终止递归调用。在他们的例子中是

if（progress<2000）{…}

I同意这一定是堆栈溢出。但是设置一个限制是不可能的，因为这将使游戏充满活力。如果用户不单击动画，动画将无限期地继续。我的猜测是，这与每次迭代中创建的区域有关，而不是被破坏的区域。我在这里重新创建了错误：

<canvas 
    #myCanvas width={{width}} height={{height}}></canvas>

this.ngZone.runOutsideAngular(() => { 
 let loop = () => {       
    this.update();         
    this.render();
    requestAnimationFrame(loop);    

  };

  requestAnimationFrame(loop);  
}