HTML炫酷煙花

fireworks

系列文章

序號	目錄
1	HTML滿屏跳動的愛心（可寫字）
2	HTML五彩繽紛的愛心
3	HTML滿屏漂浮愛心
4	HTML情人節快樂
5	HTML藍色愛心射線
6	HTML跳動的愛心（簡易版）
7	HTML粒子愛心
8	HTML藍色動態愛心
9	HTML跳動的愛心（雙心版）
10	HTML橙色動態粒子愛心
11	HTML旋轉愛心
12	HTML愛情樹
13	HTML3D相冊
14	HTML旋轉相冊
15	HTML基礎煙花秀
16	HTML炫酷煙花秀
17	HTML粉色煙花秀
18	HTML新春煙花
19	HTML跨年煙花
20	HTML音樂圣誕樹
21	HTML大雪紛飛
22	HTML想見你
23	HTML元素周期表
24	HTML飛舞的花瓣
25	HTML星空特效
26	HTML黑客帝國字母雨
27	HTML哆啦A夢
28	HTML流星雨
29	HTML沙漏愛心
30	HTML愛心字母雨
31	HTML愛心流星雨
32	HTML生日蛋糕
33	HTML3D旋轉相冊
34	HTML流光愛心
35	HTML滿屏飄字
36	HTML飛舞愛心
37	HTML星空圣誕樹
38	HTML禮物圣誕樹
39	HTML粉色愛心
40	HTML旋轉圣誕樹

文章目錄

系列文章
寫在前面
技術需求
完整代碼
代碼分析
- 一、HTML結構分析
- 二、CSS樣式分析
- 三、JavaScript實現功能分析
- - 1. 全局變量初始化
  - 2. 煙花和粒子類設計
  - - （1）`Firework`類
    - （2）`Particle`類
  - 3. 煙花效果的生成與動畫
  - 4. 窗口自適應
- 四、代碼運行機制與特點
- 五、總結
寫在后面

寫在前面

HTML語言實現新春煙花的完整代碼。

技術需求

HTML5 Canvas
- 利用<canvas>標簽及其2D繪圖上下文（通過getContext("2d")獲取）實現煙花動畫的動態繪制。
CSS樣式
- 采用絕對定位（position: absolute）確保文字居中顯示。
- 運用視窗單位（vw）動態調整字體大小，并結合顏色漸變（text-shadow）提升視覺效果。
- 設置深色背景（background-color），以突出煙花的視覺沖擊力。
JavaScript動畫
- 面向對象編程：創建Firework和Particle類，封裝煙花與粒子的行為屬性（如位置、速度、透明度等）。
- 動畫實現：借助requestAnimationFrame確保動畫流暢運行；模擬真實物理效果，動態調整粒子的摩擦力、重力和透明度。
- 隨機性：利用Math.random控制粒子的數量、顏色、方向和速度，生成多樣化的煙花效果。
- 拖尾效果：每幀繪制半透明矩形，營造煙花拖尾的視覺效果。
事件監聽
- 監聽resize事件，動態調整<canvas>畫布尺寸，以適應窗口大小的變化。

完整代碼

<!DOCTYPE html>
<html lang="en">
<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: #14141E;font-family: Arial, sans-serif;}canvas {display: block;}#text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 5vw;font-weight: bold;color: rgb(255, 190, 200);text-shadow: 2px 2px 10px rgba(255, 190, 200, 0.7);}</style>
</head>
<body><div id="text">Happy New Year!</div><canvas id="fireworks"></canvas><script>const canvas = document.getElementById("fireworks");const ctx = canvas.getContext("2d");canvas.width = window.innerWidth;canvas.height = window.innerHeight;const colors = ["#ff4d4d", "#ff9933", "#ffcc00", "#33cc33", "#33cccc", "#3399ff", "#cc66ff"];
……

代碼分析

以下是對這段HTML代碼的詳細分析，從頁面結構、樣式設計到JavaScript實現功能進行全面解讀：

一、HTML結構分析

文檔聲明與基本結構
- 代碼以<!DOCTYPE html>開頭，表明該文檔遵循HTML5標準。
- <html>標簽包含整個頁面內容，并通過lang="en"屬性指定頁面語言為英語。
- <head>標簽中定義了元信息：
  - <meta charset="UTF-8">確保頁面使用UTF-8字符編碼，保障字符正確顯示。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">實現頁面在不同設備上的自適應布局。
  - <title>標簽定義頁面標題為“新春煙花”。
- <body>標簽內包含一個用于顯示新年祝福文字的<div>元素和一個用于繪制煙花動畫的<canvas>元素。
關鍵HTML元素
- <div id="text">: 顯示“Happy New Year!”文字，增強節日氛圍。
- <canvas id="fireworks">: 作為煙花動畫的畫布元素，提供動態展示的基礎。

二、CSS樣式分析

頁面整體樣式
- body樣式：
  - margin: 0移除默認外邊距，使內容充滿頁面。
  - overflow: hidden隱藏滾動條，避免影響動畫效果。
  - background-color: #14141E設置深色背景，與明亮的煙花形成對比。
  - font-family: Arial, sans-serif定義頁面字體。
canvas樣式
- display: block消除畫布默認的內邊距和邊框，使其完全平鋪頁面。
#text樣式
- position: absolute使文字絕對定位。
- top: 50% 和 left: 50%將文字置于頁面中心。
- transform: translate(-50%, -50%)精確居中，確保文字位置穩定。
- font-size: 5vw根據視口寬度動態調整文字大小。
- font-weight: bold加粗字體，突出顯示。
- color: rgb(255, 190, 200)柔和的粉紅色字體，增強節日氛圍。
- text-shadow添加光暈效果，使文字更為亮麗。

三、JavaScript實現功能分析

JavaScript部分的核心是通過<canvas>元素生成和控制煙花的動畫效果。代碼邏輯分為以下幾個部分：

1. 全局變量初始化

canvas和ctx：獲取畫布元素及其上下文，ctx用于調用繪圖API。
colors：定義顏色數組，用于隨機選擇煙花顏色。

2. 煙花和粒子類設計

代碼使用了兩種類：Firework和Particle，分別描述煙花和煙花粒子。

（1）`Firework`類

構造函數：
- 參數x和y指定煙花初始位置。
- this.particles存儲粒子對象數組。
- 調用createParticles方法生成粒子。
方法：
- createParticles：生成50到100個隨機數量的粒子。
- update：更新每個粒子的狀態（位置、透明度等），當粒子透明度降至0以下時，將其移除。
- draw：調用每個粒子的繪制方法。

（2）`Particle`類

構造函數：
- x和y為粒子初始位置。
- radius：粒子大小隨機，范圍在2到5之間。
- color：從顏色數組中隨機選擇顏色。
- angle：粒子初始運動方向隨機。
- speed：粒子初速度隨機，范圍在2到7之間。
- friction和gravity：摩擦力和重力影響粒子運動。
- alpha：粒子透明度，用于漸隱效果。
方法：
- update：計算粒子的新位置，速度逐漸減小，同時透明度減少。
- draw：繪制帶顏色的圓形粒子，透明度由globalAlpha控制。

3. 煙花效果的生成與動畫

全局數組fireworks存儲所有當前活動的煙花。
addFirework方法：在隨機位置創建新的煙花并加入fireworks數組。
animate函數：
- 使用半透明矩形覆蓋畫布，產生拖影效果。
- 遍歷fireworks數組，更新并繪制每個煙花對象，如果煙花的所有粒子消失，則將其移除。
- 使用Math.random() < 0.05控制新煙花生成的概率，保持動畫間隔隨機。
- 使用requestAnimationFrame保持動畫連續性。

4. 窗口自適應

window.addEventListener("resize")監聽窗口大小變化事件。
每當窗口調整大小時，更新畫布尺寸以適應新尺寸。

四、代碼運行機制與特點

煙花效果實現：
- 通過粒子生成與運動模擬煙花爆炸效果。
- 粒子的顏色、運動方向、速度等均為隨機，增強視覺自然感。
- 每次刷新畫布時保留上一幀的殘影，形成拖尾效果。
節日氛圍營造：
- 中心文字配合柔和背景和動態煙花，體現新年喜慶主題。
- 動態畫面與靜態文字結合，增加視覺層次感。
性能優化：
- 粒子通過alpha屬性逐漸透明并移除，減少內存占用。
- 拖尾效果使用半透明矩形而非完全清空畫布，降低繪制開銷。
響應式設計：
- 使用vw單位和監聽窗口變化事件，確保頁面在不同設備上良好顯示。