Day 25 - 用 canvas 做 烟火

庆祝国庆日啦

成功的

失败的

import "./styles.css";
import React, { useEffect, useRef } from "react";

let hue = Math.random() * 360;
let hueVariance = 60;

export default function App() {
  const canvasRef = useRef(null);

  useEffect(() => {
    tick();
  }, [canvasRef]);

  const drawFires = (x = 0, y = 0) => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");

    // 初始半径，以及粒子数量
    let count = 10;
    let radius = 10;
    for (let i = 0; i < count; i++) {
      let angle = (360 / count) * i;
      let radians = (angle * Math.PI) / 180;
      let moveX = x + Math.cos(radians) * radius;
      let moveY = y + Math.sin(radians) * radius;

      ctx.beginPath();
      ctx.arc(moveX, moveY, 2, Math.PI * 2, false);
      // 结束
      ctx.closePath();
      ctx.fillStyle = "#ff0000";
      ctx.fill();

      ctx.beginPath();
      ctx.arc(moveX, moveY, 2, Math.PI * 2, false);
      ctx.x += moveX;
      ctx.y += moveY;

      ctx.radius *= 1 - ctx.speed / 120;
      ctx.alpha -= 0.01;

      const style = setColors();
      ctx.fillStyle = `hsl(${style?.hue}, ${style?.lightness}, ${style?.alpha})`;
      ctx.fill();
      ctx.closePath();
    }
  };
  const handleClick = (e) => {
    let x = e.clientX;
    let y = e.clientY;
    //  addFires(x, y);
    drawFires(x, y);
  };

  /**
   *  隐影
   */
  const tick = () => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    ctx.globalCompositeOperation = "destination-out";
    ctx.fillStyle = "rgba(0,0,0," + 10 / 100 + ")";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "lighter";
    // 更新画布
    drawFires();
    // requestAnimationFrame(tick);
  };

  function setColors() {
    let firework = { hue: null, brightness: null, alpha: null };
    firework.hue =
      Math.floor(Math.random() * (hue + hueVariance - (hue - hueVariance))) +
      (hue - hueVariance);
    firework.brightness = Math.floor(Math.random() * 21) + 50;
    firework.alpha = (Math.floor(Math.random() * 60) + 40) / 100;
    return firework;
  }

  return (
    <div className="App">
      <canvas
        ref={canvasRef}
        width="500"
        height="500"
        onClick={handleClick}
      ></canvas>
    </div>
  );
}