Canvas.clearRect 不是 React 中的函數

Question

試圖在我的 Portfolio 網站中添加一些畫布動畫，我正在從另一個項目復制一個簡單的動畫，但我遇到了問題。 .clearRect 不是 React 中的函數 :(

 animate = c => {
    requestAnimationFrame(this.animate);
    c.clearRect(0, 0, 800, 600);
    c.fillStyle = "white";

    c.fillRect(this.state.positionX, this.state.positionY, 20, 20);

    this.state.positionX += this.state.xSpeed;
    this.state.positionY += this.state.ySpeed;

    if (this.state.positionX === 780) this.setState({ xSpeed: -2 });
    if (this.state.positionX === 0) this.setState({ xSpeed: 2 });
    if (this.state.positionY === 0) this.setState({ ySpeed: 2 });
    if (this.state.positionY === 580) this.setState({ xSpeed: -2 });
  };

  componentDidMount() {
    const canvas = document.getElementById("canv");
    const c = canvas.getContext("2d");
    this.animate(c);
  }

Answer 1

從requestAnimationFrame調用animate時，您沒有傳遞繪圖上下文。 它第一次運行，因為你調用this.animate(c); 並將c傳遞給animate 。

您需要創建一個函數來捕獲c並將其傳遞給下一幀。

requestAnimationFrame(() => this.animate(c));