如何防止requestAnimationFrame在单击按钮后多次重画画布？

Question

我正在画画布罪，并为其增加运动感

export class CanvasComponent implements OnInit {
  @ViewChild('canvas', { static: true })
  canvas: ElementRef<HTMLCanvasElement>;

  ctx: CanvasRenderingContext2D;

  winddrawvalue = 0;
  windvalue = 0;

  constructor() { }

  @Input() set speeddata(speed: number){
    this.windvalue = speed;
    this.drawWind();
  }

  ngOnInit(): void {
    this.ctx = this.canvas.nativeElement.getContext('2d');
  }

  drawWind() {
    requestAnimationFrame(this.drawWind.bind(this));
    const canvas = this.canvas.nativeElement;
    this.ctx.lineWidth = 2;
    this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    this.ctx.beginPath();

    this.ctx.moveTo(-10, canvas.height / 2 - 12);
    for (let i = 0; i < canvas.width; i++) {
      this.ctx.lineTo(i, canvas.height / 2 - 12 + Math.sin(i * 0.04 + this.winddrawvalue) * 15);
    }

    this.ctx.moveTo(-10, canvas.height / 2);
    for (let i = 0; i < canvas.width; i++) {
      this.ctx.lineTo(i, canvas.height / 2 + Math.sin(i * 0.04 + this.winddrawvalue) * 15);
    }

    this.ctx.moveTo(-10, canvas.height / 2 + 12);
    for (let i = 0; i < canvas.width; i++) {
      this.ctx.lineTo(i, canvas.height / 2 + 12 + Math.sin(i * 0.04 + this.winddrawvalue) * 15);
    }

    this.ctx.stroke();
    this.winddrawvalue += this.windvalue;
  }

}

并且每次我按下按钮以再次绘制它时，画布都会重新绘制它，但是它的运动速度比以前快了2倍。我试图做

request = requestAnimationFrame(this.drawWind.bind(this));

  @Input() set speeddata(speed: number){
    this.windvalue = speed;
    this.stopAnimation(this.request);
    this.drawWind();
  }

  stopAnimation(req) {
    cancelAnimationFrame(req);
  }

[cancelAnimationFrame()希望它将获得requestID来停止正在进行的动画，但是它不起作用。

Answer 1

由于drawWind每次都会设置下一个调用，所以当您从点击处理程序调用它时，现在有两个并行运行的序列，并且运行速度快了两倍。

您说您尝试过cancelAnimationFrame，但没有向我们显示该代码。实际上，这就是您将如何处理：

drawWind() {
  cancelAnimationFrame(this.rafHandle);
  this.rafHandle = requestAnimationFrame(this.drawWind.bind(this));

现在，当按钮单击已计划了drawWind回调时调用rAF时，它将取消该回调并设置一个新的回调。因此，您仍然只能运行一个系列。