大屏实现流星效果react

      <canvas className='rain'></canvas>
    </div>

  const rainBg = () => {
    var c = document.querySelector(".rain");
    var ctx = c.getContext("2d"); //获取canvas上下文
    var w = (c.width = document.querySelector(".screen-section").clientWidth);
    var h = (c.height = document.querySelector(".screen-section").clientHeight);
    console.log(w, "w");
    console.log(h, "h");
    //设置canvas宽、高

    function random(min, max) {
      return Math.random() * (max - min) + min;
    }

    function RainDrop() {}
    //雨滴对象 这是绘制雨滴动画的关键
    RainDrop.prototype = {
      init: function () {
        this.x = random(0, w); //雨滴的位置x
        this.y = h; //雨滴的位置y
        this.color = "hsl(180, 100%, 50%)"; //雨滴颜色 长方形的填充色
        this.vy = random(4, 5); //雨滴下落速度
        this.hit = 0; //下落的最大值
        this.size = 2; //长方形宽度
      },
      draw: function () {
        if (this.y > this.hit) {
          var linearGradient = ctx.createLinearGradient(
            this.x,
            this.y,
            this.x,
            this.y + this.size * 30
          );
          // 设置起始颜色
          linearGradient.addColorStop(0, "#14789c");
          // 设置终止颜色
          linearGradient.addColorStop(1, "#151D4C");
          // 设置填充样式
          ctx.fillStyle = linearGradient;
          ctx.fillRect(this.x, this.y, this.size, this.size * 50); //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
        }
        this.update(); //更新位置
      },
      update: function () {
        if (this.y > this.hit) {
          this.y -= this.vy; //未达到底部，增加雨滴y坐标
        } else {
          this.init();
        }
      },
    };

    function resize() {
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight;
    }

    //初始化一个雨滴

    var rs = [];
    for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        var r = new RainDrop();
        r.init();
        rs.push(r);
      }, i * 300);
    }

    function anim() {
      ctx.clearRect(0, 0, w, h); //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
      for (var i = 0; i < rs.length; i++) {
        rs[i].draw(); //绘制雨滴
      }
      requestAnimationFrame(anim); //控制动画帧
    }

    window.addEventListener("resize", resize);
    //启动动画
    anim();
  };
  useEffect(() => {
    rainBg();
    const resizeChart = () => {
      console.log('xxxxxxxxxxx---95');
      rainBg();
    };
    window.addEventListener("resize", resizeChart);
    return () => {
      // 组件卸载时移除事件监听
      window.removeEventListener("resize", resizeChart);
    };
  }, []);

此文章为11月Day024学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程