樱花花瓣飘落的 Canvas 仙境

前端

2023-10-25 22:12:28

在充满活力的数字世界中，我们用代码创造艺术，将想象力与技术融为一体。通过 Canvas 和 React 的强大功能，我们能够在屏幕上绘制一个樱花飘落的迷人景象，让用户沉浸在大自然的短暂之美中。

数字画布上的樱花盛宴

Canvas 是一个 HTML5 元素，它允许我们使用 JavaScript 直接在网页上绘制图形。利用 React 的组件化架构，我们可以轻松地创建和控制 Canvas 上的樱花花瓣。

构建花瓣的数字模型

樱花花瓣是由贝塞尔曲线绘制的，这是数学曲线，允许我们创建平滑优雅的形状。使用 JavaScript，我们定义了曲线方程，指定了花瓣的中心点、尺寸和旋转。

赋予花瓣生命

为了让花瓣在屏幕上飘落，我们需要赋予它们运动。React 的 state 管理系统允许我们跟踪每个花瓣的位置和速度。通过定期更新 state，我们模拟了花瓣受重力影响的自然下降。

模拟风的影响

为了增加真实感，我们引入了风的因素。通过生成随机风向和强度，我们让花瓣在飘落时轻微偏离，就像被风吹拂一样。

绘制花瓣盛开

花瓣的绘制使用 Canvas 的 fill() 和 stroke() 方法。通过设置颜色、不透明度和阴影，我们创建了具有逼真纹理和深度的花瓣。

优化性能

为了确保流畅的动画，我们使用 requestAnimationFrame() 函数，它根据浏览器的刷新率更新 Canvas。这确保了花瓣的平滑运动，即使在较慢的设备上也是如此。

示例代码

import React, { useState, useEffect } from "react";
import { Canvas } from "react-canvas";

const Sakura = () => {
  const [petals, setPetals] = useState([]);

  useEffect(() => {
    // 创建花瓣并初始化其位置和速度
    const newPetals = [];
    for (let i = 0; i < 100; i++) {
      newPetals.push({
        x: Math.random() * window.innerWidth,
        y: 0,
        speedX: 0,
        speedY: Math.random() * 2 + 1,
        rotation: Math.random() * 360,
        rotationSpeed: Math.random() * 0.5,
      });
    }
    setPetals(newPetals);
  }, []);

  useEffect(() => {
    // 动画循环更新花瓣的位置
    const interval = setInterval(() => {
      const newPetals = petals.map((petal) => {
        petal.x += petal.speedX;
        petal.y += petal.speedY;
        petal.rotation += petal.rotationSpeed;
        return petal;
      });
      setPetals(newPetals);
    }, 16);
    return () => clearInterval(interval);
  }, [petals]);

  return (
    <Canvas
      height={window.innerHeight}
      width={window.innerWidth}
      style={{ position: "absolute", top: 0, left: 0 }}
    >
      {petals.map((petal) => (
        <path
          key={petal.x}
          d={...} // 贝塞尔曲线方程
          fill={...}
          stroke={...}
          transform={`translate(${petal.x}, ${petal.y}) rotate(${petal.rotation})`}
        />
      ))}
    </Canvas>
  );
};

export default Sakura;