烟花特效2，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绚丽烟花秀</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('fireworksCanvas');
            const ctx = canvas.getContext('2d');
            resizeCanvas();

            const colors = [
                '255,99,71', '135,206,250', '50,205,50', '255,215,0', 
                '218,112,214', '255,140,0', '75,0,130', '255,20,147'
            ];
            const fireworks = [];

            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }

            window.addEventListener('resize', resizeCanvas);

            function Particle(x, y, color) {
                const angle = Math.random() * Math.PI * 2; // Random angle
                const speed = Math.random() * 3 + 2; // Random speed
                this.x = x;
                this.y = y;
                this.vx = Math.cos(angle) * speed;
                this.vy = Math.sin(angle) * speed;
                this.life = 150;
                this.color = color;
                this.shape = Math.random() > 0.5 ? 'circle' : 'line'; // Random shape
            }

            function initFirework() {
                const x = Math.random() * canvas.width;
                const y = canvas.height;
                const v = Math.random() * 5 + 5;
                const color = colors[Math.floor(Math.random() * colors.length)];
                const height = Math.random() * canvas.height / 2 + canvas.height / 4; // Random height
                const firework = { x, y, v, color, height, particles: [] };
                fireworks.push(firework);
            }

            function updateFireworks() {
                for (let i = fireworks.length - 1; i >= 0; i--) {
                    const firework = fireworks[i];
                    if (firework.y > firework.height) {
                        firework.y -= firework.v;
                        ctx.beginPath();
                        ctx.arc(firework.x, firework.y, 3, 0, 2 * Math.PI);
                        ctx.fillStyle = `rgb(${firework.color})`;
                        ctx.fill();
                    } else {
                        if (firework.particles.length === 0) {
                            for (let j = 0; j < 200; j++) { // Increased particles
                                firework.particles.push(new Particle(firework.x, firework.y, firework.color));
                            }
                        }
                        for (let j = firework.particles.length - 1; j >= 0; j--) {
                            const particle = firework.particles[j];
                            particle.x += particle.vx;
                            particle.y += particle.vy;
                            particle.vy += 0.02; // Slight gravity
                            particle.life--;
                            const alpha = particle.life / 150;
                            ctx.fillStyle = `rgba(${particle.color},${alpha})`;

                            if (particle.shape === 'circle') {
                                ctx.beginPath();
                                ctx.arc(particle.x, particle.y, 2, 0, 2 * Math.PI);
                                ctx.fill();
                            } else if (particle.shape === 'line') {
                                ctx.beginPath();
                                ctx.moveTo(particle.x, particle.y);
                                ctx.lineTo(particle.x - particle.vx * 2, particle.y - particle.vy * 2);
                                ctx.strokeStyle = ctx.fillStyle;
                                ctx.stroke();
                            }

                            if (particle.life <= 0) {
                                firework.particles.splice(j, 1);
                            }
                        }
                        if (firework.particles.length === 0) {
                            fireworks.splice(i, 1);
                        }
                    }
                }
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                updateFireworks();
                requestAnimationFrame(animate);
            }

            setInterval(initFirework, 100); // More frequent fireworks
            animate();
        };
    </script>
</body>
</html>
编辑器加载中