HTML5 Canvas高级动画实战：从零构建粒子系统与物理引擎

原创作者：前端图形专家 | 发布日期：2024年1月16日

一、Canvas基础与性能优化

1.1 Canvas渲染上下文选择

// 检测浏览器支持的渲染上下文
const canvas = document.getElementById('particleCanvas');
const contexts = [
    { name: 'webgl2', context: canvas.getContext('webgl2') },
    { name: 'webgl', context: canvas.getContext('webgl') },
    { name: '2d', context: canvas.getContext('2d') }
];

const renderer = contexts.find(ctx => ctx.context) || contexts[2];
console.log(`使用渲染器: ${renderer.name}`);

1.2 高分辨率屏幕适配

function setupHighDPICanvas(canvas) {
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    canvas.style.width = `${rect.width}px`;
    canvas.style.height = `${rect.height}px`;
    
    const ctx = canvas.getContext('2d');
    ctx.scale(dpr, dpr);
    
    return { ctx, dpr };
}

二、粒子系统核心架构

2.1 粒子基类设计

class Particle {
    constructor(x, y, config = {}) {
        this.x = x;
        this.y = y;
        this.vx = config.vx || 0;
        this.vy = config.vy || 0;
        this.life = config.life || 100;
        this.maxLife = this.life;
        this.color = config.color || '#ff0000';
        this.size = config.size || 2;
        this.gravity = config.gravity || 0.1;
        this.friction = config.friction || 0.98;
    }
    
    update() {
        this.vy += this.gravity;
        this.vx *= this.friction;
        this.vy *= this.friction;
        
        this.x += this.vx;
        this.y += this.vy;
        this.life--;
        
        return this.life > 0;
    }
    
    draw(ctx) {
        const alpha = this.life / this.maxLife;
        ctx.save();
        ctx.globalAlpha = alpha;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }
}

2.2 粒子发射器实现

class ParticleEmitter {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.particles = [];
        this.emissionRate = 10; // 每秒发射粒子数
        this.lastEmissionTime = 0;
    }
    
    emit(config) {
        const now = Date.now();
        if (now - this.lastEmissionTime < 1000 / this.emissionRate) {
            return;
        }
        
        for (let i = 0; i  particle.update());
    }
    
    draw(ctx) {
        this.particles.forEach(particle => particle.draw(ctx));
    }
}

三、物理引擎实现原理

3.1 碰撞检测系统

class PhysicsEngine {
    constructor() {
        this.collidables = [];
        this.gravity = 0.5;
    }
    
    addCollidable(obj) {
        this.collidables.push(obj);
    }
    
    checkCollisions(particle) {
        for (const obj of this.collidables) {
            if (this.circleRectCollision(particle, obj)) {
                this.resolveCollision(particle, obj);
            }
        }
    }
    
    circleRectCollision(circle, rect) {
        const closestX = Math.max(rect.x, Math.min(circle.x, rect.x + rect.width));
        const closestY = Math.max(rect.y, Math.min(circle.y, rect.y + rect.height));
        
        const distanceX = circle.x - closestX;
        const distanceY = circle.y - closestY;
        
        return (distanceX * distanceX + distanceY * distanceY) < (circle.size * circle.size);
    }
    
    resolveCollision(particle, rect) {
        // 简化的碰撞响应
        particle.vy *= -0.8; // 能量损失
        particle.vx *= 0.9;  // 摩擦力
    }
}

3.2 风力场模拟

class WindField {
    constructor(strength, direction) {
        this.strength = strength;
        this.direction = direction; // 角度，弧度制
        this.turbulence = 0.1;
    }
    
    applyForce(particle) {
        const turbulence = (Math.random() - 0.5) * this.turbulence;
        const effectiveDirection = this.direction + turbulence;
        
        particle.vx += Math.cos(effectiveDirection) * this.strength;
        particle.vy += Math.sin(effectiveDirection) * this.strength;
    }
}

四、交互式烟花模拟实战

4.1 烟花粒子特效

class Firework extends Particle {
    constructor(x, y, targetY) {
        super(x, y, {
            vy: -Math.random() * 8 - 5, // 向上发射
            gravity: 0.2,
            color: `hsl(${Math.random() * 360}, 100%, 60%)`,
            size: 3,
            life: 120
        });
        this.targetY = targetY;
        this.exploded = false;
        this.trail = [];
    }
    
    update() {
        if (!this.exploded) {
            this.trail.push({ x: this.x, y: this.y });
            if (this.trail.length > 10) this.trail.shift();
            
            if (this.vy >= 0 || this.y <= this.targetY) {
                this.explode();
                return false;
            }
        }
        return super.update();
    }
    
    explode() {
        this.exploded = true;
        const explosion = new ParticleExplosion(this.x, this.y, {
            count: 100,
            colors: [this.color, '#ffff00', '#ffa500'],
            minSpeed: 1,
            maxSpeed: 5
        });
        particleSystem.addExplosion(explosion);
    }
}

4.2 完整的烟花系统

class FireworkSystem {
    constructor(canvas) {
        this.canvas = canvas;
        this.fireworks = [];
        this.particleSystem = new ParticleSystem();
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        this.canvas.addEventListener('click', (e) => {
            this.launchFirework(e.offsetX, e.offsetY);
        });
        
        // 自动发射烟花
        setInterval(() => {
            if (Math.random()  {
            const alive = firework.update();
            if (!alive && firework.exploded) {
                this.particleSystem.addParticles(firework.explosionParticles);
            }
            return alive;
        });
        
        this.particleSystem.update();
    }
    
    draw(ctx) {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
        
        this.fireworks.forEach(firework => firework.draw(ctx));
        this.particleSystem.draw(ctx);
    }
}

五、高级优化技巧

5.1 对象池技术

class ParticlePool {
    constructor(maxSize) {
        this.maxSize = maxSize;
        this.pool = [];
        this.activeCount = 0;
    }
    
    get(x, y, config) {
        if (this.activeCount >= this.maxSize) {
            return null; // 达到最大数量
        }
        
        let particle;
        if (this.pool.length > 0) {
            particle = this.pool.pop();
            particle.reset(x, y, config);
        } else {
            particle = new Particle(x, y, config);
        }
        
        this.activeCount++;
        return particle;
    }
    
    release(particle) {
        if (this.pool.length < this.maxSize) {
            this.pool.push(particle);
        }
        this.activeCount--;
    }
}

5.2 性能监控系统

class PerformanceMonitor {
    constructor() {
        this.fps = 0;
        this.frameCount = 0;
        this.lastTime = Date.now();
        this.particleCount = 0;
    }
    
    update(particleCount) {
        this.frameCount++;
        this.particleCount = particleCount;
        
        const currentTime = Date.now();
        if (currentTime - this.lastTime >= 1000) {
            this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastTime));
            this.frameCount = 0;
            this.lastTime = currentTime;
            this.logStats();
        }
    }
    
    logStats() {
        console.log(`FPS: ${this.fps}, 粒子数量: ${this.particleCount}`);
        
        // 在画布上显示性能信息
        const statsElement = document.getElementById('stats');
        if (statsElement) {
            statsElement.innerHTML = `
                FPS: ${this.fps} | 
                粒子数: ${this.particleCount} |
                内存使用: ${Math.round(this.particleCount * 0.1)}KB
            `;
        }
    }
}