我试图使用 GSAP 在我的 React 应用程序中制作滚动动画，但是当我将其链接到画布时，我不断收到错误 .getContext 不是一个函数。

我的计划是创建一个类似于翻书之类的滚动动画

任何建议都将非常感谢

谢谢

import { useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

function Landing() {
  const canvasRef = useRef();
  canvasRef.width = window.innerWidth;
  canvasRef.height = window.innerHeight;
  const context = canvasRef.getContext("2d");
  const frameCount = 230;

  const currentFrame = (index) =>
    `../../assets/landing-animations/${(index + 1).toString()}.jpg`;
  const images = [];
  let ball = { frame: 0 };

  for (let i = 0; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
    images.push(img);
  }

  images[0].onload = render;

  function render() {
    context.clearRect(0, 0, canvasRef.width, canvasRef.height);
    context.drawImage(images[ball.frame]);
  }
  return (
    <div className="landing">
      <h1 className="landing__header">Welcome to my portfolio</h1>
      <canvas className="landing__canvas" ref={canvasRef}></canvas>;
    </div>
  );
}

export default Landing;