夜空特效程序html

最新推荐文章于 2024-09-10 22:55:28 发布
vliu612
最新推荐文章于 2024-09-10 22:55:28 发布
阅读量256
点赞数 1
文章标签： css 前端 javascript
本文链接：https://blog.csdn.net/vliu612/article/details/140924630
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fireworks</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function createGradient() {
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#001848');
            gradient.addColorStop(1, '#000000');
            return gradient;
        }

        function drawBackground() {
            ctx.fillStyle = createGradient();
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function drawStars() {
            const starCount = 100;
            for (let i = 0; i < starCount; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height * 0.5;
                const radius = Math.random() * 2;
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.closePath();
            }
        }

        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        class Firework {
            constructor() {
                this.x = random(0, canvas.width);
                this.y = canvas.height;
                this.targetX = random(0, canvas.width);
                this.targetY = random(0, canvas.height / 2);
                this.speed = random(2, 5);
                this.angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
                this.coordinates = Array.from({ length: 3 }, () => [this.x, this.y]);
                this.distanceToTarget = Math.hypot(this.targetX - this.x, this.targetY - this.y);
                this.distanceTraveled = 0;
                this.brightness = random(50, 70);
                this.targetRadius = 1;
            }

            update(index) {
                this.coordinates.pop();
                this.coordinates.unshift([this.x, this.y]);

                this.targetRadius = this.targetRadius < 12 ? this.targetRadius + 0.5 : 1;

                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;

                this.distanceTraveled = Math.hypot(this.x - this.targetX, this.y - this.targetY);

                if (this.distanceTraveled >= this.distanceToTarget) {
                    createParticles(this.targetX, this.targetY);
                    fireworks.splice(index, 1);
                }
            }

            draw() {
                ctx.beginPath();
                ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = `hsl(${random(0, 360)}, 100%, ${this.brightness}%)`;
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(this.targetX, this.targetY, this.targetRadius, 0, Math.PI * 2);
                ctx.stroke();
            }
        }

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.coordinates = Array.from({ length: 5 }, () => [this.x, this.y]);
                this.angle = random(0, Math.PI * 2);
                this.speed = random(2, 12);
                this.friction = 0.95;
                this.gravity = 1.2;
                this.hue = random(0, 360);
                this.brightness = random(50, 80);
                this.alpha = 1;
                this.decay = random(0.01, 0.02);
                this.size = random(3, 5);
            }

            update(index) {
                this.coordinates.pop();
                this.coordinates.unshift([this.x, this.y]);

                this.speed *= this.friction;
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed + this.gravity;
                this.alpha -= this.decay;

                if (this.alpha <= this.decay) {
                    particles.splice(index, 1);
                }
            }

            draw() {
                ctx.beginPath();
                ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;
                ctx.lineWidth = this.size;
                ctx.stroke();
            }
        }

        const fireworks = [];
        const particles = [];

        function createParticles(x, y) {
            for (let i = 0; i < 50; i++) {  // 减少粒子的数量
                particles.push(new Particle(x, y));
            }
        }

        function loop() {
            requestAnimationFrame(loop);

            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.globalCompositeOperation = 'lighter';

            drawBackground();
            drawStars();

            fireworks.forEach((firework, index) => {
                firework.draw();
                firework.update(index);
            });

            particles.forEach((particle, index) => {
                particle.draw();
                particle.update(index);
            });

            if (Math.random() < 0.1) {  // 减少烟花生成的频率
                const bursts = random(1, 2);  // 减少每次生成的烟花数量
                for (let i = 0; i < bursts; i++) {
                    fireworks.push(new Firework());
                }
            }
        }

        window.onload = loop;
        window.onresize = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };
    </script>
</body>
</html>