当前位置：首页 > JavaScript

js实现晚霞

2026-02-01 11:34:39JavaScript

实现晚霞效果的 JavaScript 方法

使用 Canvas 绘制渐变晚霞

通过 HTML5 Canvas 可以创建动态的晚霞效果，利用径向渐变和线性渐变模拟天空颜色变化：

const canvas = document.getElementById('sunsetCanvas');
const ctx = canvas.getContext('2d');

function drawSunset() {
  // 创建天空渐变
  const skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  skyGradient.addColorStop(0, '#FF7F50');  // 深橙色
  skyGradient.addColorStop(0.5, '#FF4500'); // 橙红色
  skyGradient.addColorStop(1, '#8B0000');  // 深红色

  ctx.fillStyle = skyGradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制太阳
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI * 2);
  const sunGradient = ctx.createRadialGradient(
    canvas.width/2, canvas.height/2, 10,
    canvas.width/2, canvas.height/2, 50
  );
  sunGradient.addColorStop(0, '#FFFF00');
  sunGradient.addColorStop(1, '#FFA500');
  ctx.fillStyle = sunGradient;
  ctx.fill();
}

drawSunset();

使用 CSS 动画创建晚霞背景

通过 CSS 关键帧动画可以实现颜色渐变的晚霞效果：

// 动态创建样式元素
const style = document.createElement('style');
style.textContent = `
  .sunset-sky {
    height: 100vh;
    background: linear-gradient(to bottom, #FF7F50, #FF4500, #8B0000);
    animation: sunsetGlow 10s infinite alternate;
  }

  @keyframes sunsetGlow {
    0% { background-color: #FF7F50; }
    50% { background-color: #FF4500; }
    100% { background-color: #8B0000; }
  }
`;
document.head.appendChild(style);

// 应用到页面元素
document.body.innerHTML = '<div class="sunset-sky"></div>';

使用 Three.js 创建 3D 晚霞

对于更逼真的效果，可以使用 WebGL 库 Three.js：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建天空盒
const skyGeometry = new THREE.SphereGeometry(500, 60, 40);
const skyMaterial = new THREE.ShaderMaterial({
  vertexShader: `
    varying vec3 vWorldPosition;
    void main() {
      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
      vWorldPosition = worldPosition.xyz;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 topColor;
    uniform vec3 bottomColor;
    varying vec3 vWorldPosition;

    void main() {
      float h = normalize(vWorldPosition).y;
      gl_FragColor = vec4(mix(bottomColor, topColor, max(pow(h, 0.8), 0.0)), 1.0);
    }
  `,
  uniforms: {
    topColor: { value: new THREE.Color(0xFF4500) },
    bottomColor: { value: new THREE.Color(0x8B0000) }
  },
  side: THREE.BackSide
});

const sky = new THREE.Mesh(skyGeometry, skyMaterial);
scene.add(sky);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

使用粒子系统模拟云彩

通过粒子系统可以增强晚霞的真实感：

js实现晚霞

const particles = new THREE.BufferGeometry();
const particleCount = 5000;
const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount; i++) {
  const i3 = i * 3;
  positions[i3] = (Math.random() - 0.5) * 1000;
  positions[i3 + 1] = Math.random() * 200 + 100;
  positions[i3 + 2] = (Math.random() - 0.5) * 1000;
}

particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const particleMaterial = new THREE.PointsMaterial({
  color: 0xFF7F50,
  size: 5,
  transparent: true,
  opacity: 0.7
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

这些方法可以根据需求单独使用或组合使用，创建不同风格的晚霞视觉效果。Canvas 方法适合简单的二维效果，CSS 动画实现简单但效果有限，Three.js 则能创建更复杂的三维场景。