Canvas星空类特效

#思路

1. 绘制单个星星
2. 在画布批量随机绘制星星
3. 添加星星移动动画
4. 页面resize处理

#Vanilla JavaScript实现

1. 初始化一个工程

复制pnpm create vite@latest



cd <工程目录> pnpm install pnpm dev 

复制body {
  background-color: black;
  overflow: hidden;
}

复制"use strict";
import './style.css';

document.querySelector('#app').innerHTML = `
  <canvas id="canvas"></canvas>
`;

2. 绘制单个星星

复制const hue = 220; 

const offscreenCanvas = document.createElement("canvas"); 
const offscreenCtx = offscreenCanvas.getContext("2d");
offscreenCanvas.width = 100;
offscreenCanvas.height = 100;
const half = offscreenCanvas.width / 2;
const middle = half;

const gradient = offscreenCtx.createRadialGradient(
  middle,
  middle,
  0,
  middle,
  middle,
  half
);

gradient.addColorStop(0.01, "#fff");
gradient.addColorStop(0.1, `hsl(${hue}, 61%, 33%)`);
gradient.addColorStop(0.5, `hsl(${hue}, 64%, 6%)`);
gradient.addColorStop(1, "transparent");


offscreenCtx.fillStyle = gradient;
offscreenCtx.beginPath();
offscreenCtx.arc(middle, middle, half, 0, Math.PI * 2);
offscreenCtx.fill();

参考链接：

hsl() - CSS：层叠样式表 | MDN

3. 在画布批量绘制星星

其实要绘制星星，我们只需要在画布上基于离屏画布来在指定位置将离屏画布渲染成图片即可，但是批量绘制以及后续的动画需要我们能记录每颗星星的位置、状态和行驶轨迹，所以可以考虑创建一个星星的类。

复制
const stars = [];
const maxStars = 1000;


const random = (min, max) => {
  if (!max) {
    max = min;
    min = 0;
  }
  if (min > max) {
    [min, max] = [max, min];
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const maxOrbit = (_w, _h) => {
  const max = Math.max(_w, _h);
  const diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
};

class Star {
  constructor(_ctx, _w, _h) {
    this.ctx = _ctx;
    
    this.maxOrbitRadius = maxOrbit(_w, _h);
    
    this.orbitRadius = random(this.maxOrbitRadius);
    
    this.radius = random(60, this.orbitRadius) / 12;
    
    this.orbitX = _w / 2;
    this.orbitY = _h / 2;
    
    this.elapsedTime = random(0, maxStars);
    
    this.speed = random(this.orbitRadius) / 500000;
    
    this.alpha = random(2, 10) / 10;
  }
  
  draw() {
    
    const x = Math.sin(this.elapsedTime) * this.orbitRadius + this.orbitX;
    const y = Math.cos(this.elapsedTime) * this.orbitRadius + this.orbitY;

    
    const spark = Math.random();
    if (spark < 0.5 && this.alpha > 0) {
      this.alpha -= 0.05;
    } else if (spark > 0.5 && this.alpha < 1) {
      this.alpha += 0.05;
    }

    
    
    this.ctx.globalAlpha = this.alpha;
    
    this.ctx.drawImage(offscreenCanvas, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    
    this.elapsedTime += this.speed;
  }
}

获取当前画布，批量添加星星

复制const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

for (let i = 0; i < maxStars; i++) {
  stars.push(new Star(ctx, w, h));
}

4. 添加星星的移动动画

复制function animation() {
  
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.8;
  ctx.fillStyle = `hsla(${hue} , 64%, 6%, 1)`;
  ctx.fillRect(0, 0, w, h);
  
  ctx.globalCompositeOperation = 'lighter';
  stars.forEach(star => {
    star.draw();
  });
  window.requestAnimationFrame(animation);
}

animation();

这样星星就动起来了。

5. 页面resize处理

其实只需要在resize事件触发时重新设定画布的大小即可

复制window.addEventListener('resize', () => {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
});

但是有一个问题，就是星星的运行轨迹并没有按比例变化，所以需要添加两处变化

复制
class Star {
  constructor(_ctx, _w, _h) {
  
  update(_w, _h) {
    
    const ratio = maxOrbit(_w, _h) / this.maxOrbitRadius;
    
    if (ratio !== 1) {
      
      this.maxOrbitRadius = maxOrbit(_w, _h);
      
      this.orbitRadius = this.orbitRadius * ratio;
      this.radius = this.radius * ratio;
      
      this.orbitX = _w / 2;
      this.orbitY = _h / 2;
    }
  }

  draw() {
}


function animation() {
  
  stars.forEach(star => {
    star.update(w, h);
    star.draw();
  });
  
}

#React实现

react实现主要需要注意resize事件的处理，怎样避免重绘时对星星数据初始化，当前思路是使用多个useEffect

复制import React, { useEffect, useRef, useState } from 'react';

const HUE = 217;
const MAX_STARS = 1000;

const random = (min: number, max?: number) => {
  if (!max) {
    max = min;
    min = 0;
  }
  if (min > max) {
    [min, max] = [max, min];
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const maxOrbit = (_w: number, _h: number) => {
  const max = Math.max(_w, _h);
  const diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
};


const getOffscreenCanvas = () => {
  const offscreenCanvas = document.createElement('canvas');
  const offscreenCtx = offscreenCanvas.getContext('2d')!;
  offscreenCanvas.width = 100;
  offscreenCanvas.height = 100;
  const half = offscreenCanvas.width / 2;
  const middle = half;
  const gradient = offscreenCtx.createRadialGradient(middle, middle, 0, middle, middle, half);
  gradient.addColorStop(0.01, '#fff');
  gradient.addColorStop(0.1, `hsl(${HUE}, 61%, 33%)`);
  gradient.addColorStop(0.5, `hsl(${HUE}, 64%, 6%)`);
  gradient.addColorStop(1, 'transparent');

  offscreenCtx.fillStyle = gradient;
  offscreenCtx.beginPath();
  offscreenCtx.arc(middle, middle, half, 0, Math.PI * 2);
  offscreenCtx.fill();
  return offscreenCanvas;
};

class OffscreenCanvas {
  static instance: HTMLCanvasElement = getOffscreenCanvas();
}

class Star {
  orbitRadius!: number;
  maxOrbitRadius!: number;
  radius!: number;
  orbitX!: number;
  orbitY!: number;
  elapsedTime!: number;
  speed!: number;
  alpha!: number;
  ratio = 1;
  offscreenCanvas = OffscreenCanvas.instance;
  constructor(
    private ctx: CanvasRenderingContext2D,
    private canvasSize: { w: number, h: number; },
  ) {
    this.maxOrbitRadius = maxOrbit(this.canvasSize.w, this.canvasSize.h);
    this.orbitRadius = random(this.maxOrbitRadius);
    this.radius = random(60, this.orbitRadius) / 12;
    this.orbitX = this.canvasSize.w / 2;
    this.orbitY = this.canvasSize.h / 2;
    this.elapsedTime = random(0, MAX_STARS);
    this.speed = random(this.orbitRadius) / 500000;
    this.alpha = random(2, 10) / 10;
  }

  update(size: { w: number, h: number; }) {
    this.canvasSize = size;
    this.ratio = maxOrbit(this.canvasSize.w, this.canvasSize.h) / this.maxOrbitRadius;
    if (this.ratio !== 1) {
      this.maxOrbitRadius = maxOrbit(this.canvasSize.w, this.canvasSize.h);
      this.orbitRadius = this.orbitRadius * this.ratio;
      this.radius = this.radius * this.ratio;
      this.orbitX = this.canvasSize.w / 2;
      this.orbitY = this.canvasSize.h / 2;
    }
  }

  draw() {
    const x = (Math.sin(this.elapsedTime) * this.orbitRadius + this.orbitX);
    const y = (Math.cos(this.elapsedTime) * this.orbitRadius + this.orbitY);
    const spark = Math.random();

    if (spark < 0.5 && this.alpha > 0) {
      this.alpha -= 0.05;
    } else if (spark > 0.5 && this.alpha < 1) {
      this.alpha += 0.05;
    }

    this.ctx.globalAlpha = this.alpha;
    this.ctx.drawImage(this.offscreenCanvas, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.elapsedTime += this.speed;
  }
}

const StarField = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const animationRef = useRef<number | null>(null);
  const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
  const [initiated, setInitiated] = useState(false);
  const [stars, setStars] = useState<Star[]>([]);

  
  useEffect(() => {
    if (canvasRef.current && canvasSize.w !== 0 && canvasSize.h !== 0 && !initiated) {
      const ctx = canvasRef.current!.getContext('2d')!;
      const _stars = Array.from({ length: MAX_STARS }, () => new Star(ctx, canvasSize));
      setStars(_stars);
      setInitiated(true);
    }
  }, [canvasSize.w, canvasSize.h]);
  
  useEffect(() => {
    if (canvasRef.current) {
      const resizeHandler = () => {
        const { clientWidth, clientHeight } = canvasRef.current!.parentElement!;
        setCanvasSize({ w: clientWidth, h: clientHeight });
      };
      resizeHandler();
      addEventListener('resize', resizeHandler);
      return () => {
        removeEventListener('resize', resizeHandler);
      };
    }
  }, []);
  
  useEffect(() => {
    if (canvasRef.current) {
      const ctx = canvasRef.current.getContext('2d')!;
      canvasRef.current!.width = canvasSize.w;
      canvasRef.current!.height = canvasSize.h;
      const animation = () => {
        ctx.globalCompositeOperation = 'source-over';
        ctx.globalAlpha = 0.8;
        ctx.fillStyle = `hsla(${HUE} , 64%, 6%, 1)`;
        ctx.fillRect(0, 0, canvasSize.w, canvasSize.h);

        ctx.globalCompositeOperation = 'lighter';
        stars.forEach((star) => {
          if (star) {
            star.update(canvasSize);
            star.draw();
          }
        });

        animationRef.current = requestAnimationFrame(animation);
      };

      animation();
      return () => {
        cancelAnimationFrame(animationRef.current!);
      };
    }
  }, [canvasSize.w, canvasSize.h, stars]);
  return (
    <canvas ref={canvasRef}></canvas>
  );
};

export default StarField;