当前位置：首页 > JavaScript

js实现烟雾

2026-02-01 03:13:55JavaScript

烟雾效果的实现方法

在JavaScript中实现烟雾效果可以通过Canvas或WebGL技术来完成。以下是几种常见的实现方式：

使用Canvas绘制粒子系统

创建一个基于Canvas的粒子系统来模拟烟雾效果：

js实现烟雾

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const particleCount = 100;

class Particle {
  constructor() {
    this.x = canvas.width / 2;
    this.y = canvas.height;
    this.size = Math.random() * 15 + 5;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * -3 - 1;
    this.color = `rgba(200, 200, 200, ${Math.random() * 0.5})`;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.size > 0.2) this.size -= 0.1;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

function init() {
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }
}

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();

    if (particles[i].size <= 0.2) {
      particles.splice(i, 1);
      i--;
    }
  }

  if (particles.length < particleCount) {
    particles.push(new Particle());
  }

  requestAnimationFrame(animate);
}

init();
animate();

使用WebGL实现更真实的烟雾

对于更真实的烟雾效果，可以使用WebGL和着色器：

js实现烟雾

// 需要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 smokeTexture = new THREE.TextureLoader().load('smoke.png');
const smokeMaterial = new THREE.MeshLambertMaterial({
  color: 0x888888,
  map: smokeTexture,
  transparent: true,
  opacity: 0.4
});

const smokeParticles = [];
for (let i = 0; i < 50; i++) {
  const particle = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10),
    smokeMaterial
  );
  particle.position.set(
    Math.random() * 50 - 25,
    Math.random() * 50 - 25,
    Math.random() * 50 - 25
  );
  particle.rotation.z = Math.random() * 360;
  scene.add(particle);
  smokeParticles.push(particle);
}

camera.position.z = 50;

function animate() {
  smokeParticles.forEach(p => {
    p.rotation.z += 0.01;
    p.position.y += 0.1;
    if (p.position.y > 25) p.position.y = -25;
  });
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

使用CSS动画实现简单烟雾

对于简单的UI效果，可以使用CSS动画：

<div class="smoke"></div>

<style>
.smoke {
  position: absolute;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  animation: smoke 4s ease-out infinite;
}

@keyframes smoke {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100px) scale(2);
    opacity: 0;
  }
}
</style>