烟花js特效-海瞳资源网

效果展示

index.html

<!DOCTYPE html>
<html>
<head>
    <title>彩色烟花特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }</style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="fireworks.js"></script>
</body>
</html>

fireworks.js

// 获取 canvas 元素
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 烟花粒子类
class Particle {
    constructor(x, y, color, angle) {
        this.x = x;
        this.y = y;
        // 使用更亮的颜色
        this.color = brightenColor(color); 
        this.size = Math.random() * 1 + 0.5;
        this.speed = Math.random() * 3 + 1;
        this.angle = angle;
        // 初始透明度设置高一点
        this.alpha = 0.9; 
        this.trail = [];
    }

    update() {
        this.trail.push({ x: this.x, y: this.y });
        if (this.trail.length > 5) {
            this.trail.shift();
        }
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;
        this.alpha -= 0.01;
        this.size -= 0.01;
    }

    draw() {
        for (let i = 0; i < this.trail.length; i++) {
            const point = this.trail[i];
            ctx.globalAlpha = this.alpha * (i + 1) / this.trail.length;
            ctx.beginPath();
            ctx.arc(point.x, point.y, this.size * (i + 1) / this.trail.length, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        }
        ctx.globalAlpha = this.alpha;
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(this.x + Math.cos(this.angle) * this.size, this.y + Math.sin(this.angle) * this.size);
        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.size * 0.5;
        ctx.stroke();
    }
}

// 烟花类
class Firework {
    constructor(x, y) {
        this.x = x;
        this.y = canvas.height;
        this.targetY = y;
        this.speed = Math.random() * 3 + 3;
        this.exploded = false;
        this.particles = [];
        const colors = ['#FF5733', '#FFC300', '#DAF7A6', '#C70039', '#900C3F', '#581845'];
        this.color = colors[Math.floor(Math.random() * colors.length)];
    }

    update() {
        if (!this.exploded) {
            this.y -= this.speed;
            if (this.y <= this.targetY) {
                this.explode();
            }
        } else {
            for (let i = this.particles.length - 1; i >= 0; i--) {
                const particle = this.particles[i];
                particle.update();
                if (particle.alpha <= 0 || particle.size <= 0) {
                    this.particles.splice(i, 1);
                }
            }
        }
    }

    explode() {
        this.exploded = true;
        // 修改此处，进一步增加粒子数量
        const numParticles = 200; 
        for (let i = 0; i < numParticles; i++) {
            const angle = (i / numParticles) * Math.PI * 2;
            this.particles.push(new Particle(this.x, this.y, this.color, angle));
        }
    }

    draw() {
        if (!this.exploded) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
        } else {
            for (const particle of this.particles) {
                particle.draw();
            }
        }
    }
}

// 辅助函数：让颜色更亮
function brightenColor(color) {
    const hex = color.replace('#', '');
    let r = parseInt(hex.substring(0, 2), 16);
    let g = parseInt(hex.substring(2, 4), 16);
    let b = parseInt(hex.substring(4, 6), 16);

    // 修改此处，进一步提高颜色亮度
    r = Math.min(255, r + 80); 
    g = Math.min(255, g + 80);
    b = Math.min(255, b + 80);

    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
}

// 烟花数组
const fireworks = [];

// 生成随机烟花
function createFirework() {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height * 0.5;
    fireworks.push(new Firework(x, y));
}

// 动画循环
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = fireworks.length - 1; i >= 0; i--) {
        const firework = fireworks[i];
        firework.update();
        firework.draw();
        if (firework.exploded && firework.particles.length === 0) {
            fireworks.splice(i, 1);
        }
    }
    // 修改此处，增加烟花发射频率
    if (Math.random() < 0.05) { 
        createFirework();
    }
    requestAnimationFrame(animate);
}

// 启动动画
animate();

// 窗口大小改变时更新 canvas 大小
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

版权声明 1 本网站名称：海瞳资源网
2 本站永久网址： https://www.haiyu.site
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ：3134263553，进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

THE END

JS特效
# 烟花特效