1. 項目概述用代碼繪制一片會呼吸的星空最近在整理一些前端小項目時又翻出了這個經(jīng)典的“動態(tài)星空”效果。它不是什么復雜的3D引擎只用最基礎(chǔ)的HTML、CSS和JavaScript就能在瀏覽器里創(chuàng)造出一片深邃、閃爍、緩緩移動的星空。這幾乎是每個前端開發(fā)者入門Canvas或?qū)W習動畫原理時都會嘗試的“浪漫”項目。它看起來簡單但背后涉及到的知識點卻非常扎實Canvas繪圖、隨機數(shù)生成、粒子系統(tǒng)、動畫循環(huán)、性能優(yōu)化甚至一點點物理模擬。無論是用來裝飾個人博客的背景還是作為學習動畫原理的絕佳案例這個項目都極具價值。今天我就來詳細拆解一下如何從零開始實現(xiàn)一個既美觀又流暢的動態(tài)星空并分享一些我在實現(xiàn)過程中積累的、教科書上不會寫的實戰(zhàn)技巧和避坑心得。2. 核心思路與架構(gòu)設(shè)計2.1 粒子系統(tǒng)星空的本質(zhì)動態(tài)星空的本質(zhì)就是一個簡化版的粒子系統(tǒng)Particle System。我們把屏幕上的每一個星星看作一個獨立的“粒子”。每個粒子都有自己的一套屬性比如位置 (x, y)在Canvas畫布上的坐標。速度 (vx, vy)決定星星移動的方向和快慢。半徑 (radius)星星的大小。亮度/透明度 (alpha)用于實現(xiàn)星星的閃爍效果。顏色 (color)通常是白色或淡黃色但也可以加入一些藍色或紫色的星云色調(diào)。我們的核心任務就是初始化幾百上千個這樣的粒子然后在每一幀動畫中更新每個粒子的屬性主要是位置和亮度并重新繪制它們。當所有粒子協(xié)同運動時就形成了星空流動和閃爍的視覺效果。2.2 技術(shù)選型為什么是Canvas實現(xiàn)這類動態(tài)圖形主要有三種前端技術(shù)純CSS動畫、SVG和Canvas。純CSS動畫對于數(shù)量少、規(guī)律性強的動畫比如幾個元素的平移、旋轉(zhuǎn)很高效但難以管理成百上千個獨立運動的元素性能開銷大控制粒度不夠細。SVG作為矢量圖形縮放不失真適合圖標和交互式圖表。但同樣當DOM節(jié)點每個SVG圖形都是一個DOM元素數(shù)量激增時性能會急劇下降。HTML5 Canvas這是我們的最佳選擇。Canvas提供了一個位圖畫布我們通過JavaScript API直接在上面進行像素級繪制。它的優(yōu)勢在于高性能所有繪制操作都由瀏覽器底層圖形API如OpenGL處理對于大量圖形的重繪效率極高。精細控制可以精確控制每個像素的顏色、位置和混合模式實現(xiàn)閃爍、拖尾、光暈等復雜效果。無DOM負擔無論繪制多少星星都不會增加DOM樹的節(jié)點數(shù)避免了重排和重繪的性能瓶頸。因此基于Canvas的粒子系統(tǒng)是實現(xiàn)動態(tài)星空在性能和靈活性上的最優(yōu)解。2.3 整體架構(gòu)設(shè)計整個項目的代碼結(jié)構(gòu)非常清晰主要分為三個部分HTML結(jié)構(gòu)一個簡單的canvas元素作為我們的“宇宙畫布”。CSS樣式讓Canvas畫布充滿整個瀏覽器視窗并設(shè)置一個深邃的深空背景色如#0a0a2a。JavaScript邏輯這是核心包含以下模塊初始化模塊獲取Canvas上下文設(shè)置畫布尺寸創(chuàng)建粒子數(shù)組并初始化所有星星粒子。粒子類/構(gòu)造函數(shù)定義星星的屬性和基礎(chǔ)方法如繪制自身、更新狀態(tài)。動畫循環(huán)模塊使用requestAnimationFrame驅(qū)動動畫在每一幀中清空畫布、更新所有粒子、重繪所有粒子。交互模塊可選監(jiān)聽窗口大小變化resize事件以自適應或監(jiān)聽鼠標移動實現(xiàn)星空隨鼠標流動的交互效果。這個架構(gòu)確保了邏輯的分離使得代碼易于閱讀、維護和擴展。3. 核心代碼實現(xiàn)與逐行解析接下來我們進入實戰(zhàn)環(huán)節(jié)。我會提供一個完整的、注釋詳細的代碼實現(xiàn)并解釋每一段關(guān)鍵代碼的意圖和原理。3.1 搭建基礎(chǔ)HTML與CSS結(jié)構(gòu)首先創(chuàng)建我們的畫布和基礎(chǔ)樣式。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title動態(tài)星空 | HTMLJS實現(xiàn)/title style /* 關(guān)鍵樣式去除默認邊距讓畫布充滿全屏 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; /* 隱藏滾動條營造沉浸感 */ background-color: #0a0a2a; /* 深藍色背景模擬夜空底色 */ height: 100vh; /* 確保body高度為整個視口 */ display: flex; justify-content: center; align-items: center; } #starCanvas { display: block; /* 消除canvas底部的默認間隙 */ /* width和height在JS中動態(tài)設(shè)置這里可以留空或設(shè)一個默認值 */ } /style /head body !-- 星空繪制的舞臺 -- canvas idstarCanvas/canvas script srcstarfield.js/script !-- 引入核心JS邏輯 -- /body /html注意這里將CSS的background-color設(shè)置在body上而不是canvas上。因為Canvas默認是透明的這樣我們既能通過Canvas繪制星星又能透過Canvas看到背景色。另一種做法是每幀在Canvas上繪制一個巨大的矩形作為背景但那樣會多一次繪制調(diào)用。當前做法更高效。3.2 JavaScript核心實現(xiàn) (starfield.js)這是整個項目的靈魂所在。我們將代碼分塊講解。3.2.1 初始化與全局變量// 獲取Canvas元素和2D繪圖上下文 const canvas document.getElementById(starCanvas); const ctx canvas.getContext(2d); // 星星粒子數(shù)組 let stars []; // 星星總數(shù)根據(jù)性能調(diào)整。1000-2000在普通電腦上通常很流暢。 const STAR_COUNT 800; // 動畫幀ID用于取消動畫循環(huán) let animationId null; // 初始化畫布尺寸 function initCanvasSize() { // 將畫布尺寸設(shè)置為窗口的內(nèi)部尺寸實現(xiàn)全屏 canvas.width window.innerWidth; canvas.height window.innerHeight; } // 立即執(zhí)行一次初始化 initCanvasSize();ctx這是我們在Canvas上作畫的“畫筆”所有繪制方法如fillRect,arc,fillStyle都通過它調(diào)用。stars用于存儲所有星星粒子對象的數(shù)組。initCanvasSize這個函數(shù)至關(guān)重要。Canvas的width和height屬性不是CSS的width和height決定了其繪圖表面drawing buffer的分辨率。如果只通過CSS縮放會導致繪制內(nèi)容模糊。因此我們必須讓繪圖表面的分辨率與Canvas元素顯示的實際像素尺寸一致。3.2.2 定義星星粒子類使用ES6的類語法來組織每個星星的屬性和行為代碼更清晰。class Star { constructor() { // 重置粒子到初始狀態(tài) this.reset(true); } // 重置星星屬性。參數(shù)init用于區(qū)分首次創(chuàng)建和飛出邊界后的重生。 reset(init false) { // 位置隨機分布在畫布上。如果是初始化y坐標也隨機否則從頂部外重生。 this.x Math.random() * canvas.width; this.y init ? Math.random() * canvas.height : -10; // 速度x方向基本不動或微動y方向向下模擬星空緩慢下移或漂浮感。 // 乘以一個隨機因子讓速度有細微差別更自然。 this.vx (Math.random() - 0.5) * 0.2; this.vy Math.random() * 0.7 0.3; // 半徑隨機大小大部分是小星星偶爾有大星星 this.radius Math.random() * 1.2 0.3; // 顏色基礎(chǔ)是白色可以混合一點藍色或黃色 const colorVariation Math.random(); if (colorVariation 0.95) { this.color rgba(255, 220, 150, ; // 暖黃色 } else if (colorVariation 0.8) { this.color rgba(200, 220, 255, ; // 冷藍色 } else { this.color rgba(255, 255, 255, ; // 純白色 } // 閃爍相關(guān)屬性 this.alpha Math.random() * 0.5 0.5; // 初始透明度 0.5-1.0 this.flickerSpeed Math.random() * 0.05 0.02; // 閃爍速度 this.flickerDirection Math.random() 0.5 ? 1 : -1; // 閃爍方向增亮或變暗 this.flickerDelta 0; // 用于正弦波計算的增量 } // 更新星星狀態(tài)位置、透明度 update() { // 更新位置 this.x this.vx; this.y this.vy; // 邊界檢查如果星星移出畫布底部則重置它從頂部重新出現(xiàn) if (this.y canvas.height 10) { this.reset(); } // 可選左右邊界穿墻 if (this.x canvas.width 10) this.x -10; if (this.x -10) this.x canvas.width 10; // 更新閃爍效果使用正弦函數(shù)產(chǎn)生平滑的周期性閃爍 this.flickerDelta this.flickerSpeed; // 正弦值范圍[-1, 1]映射到透明度變化幅度 let flicker Math.sin(this.flickerDelta) * 0.3; // 計算當前透明度并限制在合理范圍[0.2, 1.0] this.currentAlpha Math.max(0.2, Math.min(1.0, this.alpha flicker)); } // 在畫布上繪制星星 draw() { ctx.beginPath(); // 開始一條新的繪制路徑 // 繪制圓形星星。參數(shù)x, y, 半徑, 起始角, 結(jié)束角2π為一整圓 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); // 設(shè)置填充樣式使用計算出的當前透明度 ctx.fillStyle this.color this.currentAlpha ); ctx.fill(); // 執(zhí)行填充 // 進階為較大的星星添加光暈效果提升視覺質(zhì)感 if (this.radius 0.8) { // 創(chuàng)建一個徑向漸變作為光暈 const gradient ctx.createRadialGradient( this.x, this.y, 0, // 內(nèi)圓圓心和半徑 this.x, this.y, this.radius * 3 // 外圓圓心和半徑 ); gradient.addColorStop(0, this.color 0.3)); // 中心較實 gradient.addColorStop(1, this.color 0)); // 邊緣完全透明 ctx.fillStyle gradient; // 繪制一個更大的圓作為光暈 ctx.beginPath(); ctx.arc(this.x, this.y, this.radius * 3, 0, Math.PI * 2); ctx.fill(); } } }關(guān)鍵點解析reset方法這是粒子系統(tǒng)的常見模式。粒子飛出邊界后不是被銷毀而是“重置”屬性后復用避免了頻繁創(chuàng)建和銷毀對象的垃圾回收壓力是重要的性能優(yōu)化點。速度設(shè)置vy垂直速度設(shè)置為正數(shù)所以星星整體向下移動。通過給vx一個很小的隨機正負值可以讓星空有輕微的橫向流動感更生動。閃爍算法沒有使用簡單的隨機數(shù)切換而是用Math.sin正弦函數(shù)。正弦波的平滑性使得星星的明暗變化是連續(xù)的、自然的避免了生硬的跳變。flickerDelta的累加實現(xiàn)了動畫的推進。光暈效果使用createRadialGradient創(chuàng)建徑向漸變來模擬星星的光芒。這是提升視覺效果的關(guān)鍵一步讓星星看起來不是生硬的圓點而是有發(fā)光的感覺。注意光暈的繪制要在星星本體之后并且其透明度漸變要設(shè)置正確。3.2.3 初始化粒子數(shù)組與動畫循環(huán)// 初始化創(chuàng)建所有星星粒子 function initStars() { stars []; // 清空數(shù)組 for (let i 0; i STAR_COUNT; i) { stars.push(new Star()); } } // 動畫循環(huán)函數(shù) function animate() { // 1. 清空畫布用透明色清除整個區(qū)域露出body的深色背景 // 注意如果每幀繪制背景矩形則用 fillRect ctx.clearRect(0, 0, canvas.width, canvas.height); // 2. 更新并繪制每一個星星 for (let star of stars) { star.update(); // 計算新位置和透明度 star.draw(); // 繪制到畫布上 } // 3. 請求下一幀動畫形成循環(huán) animationId requestAnimationFrame(animate); } // 啟動動畫 function startAnimation() { if (!animationId) { // 防止重復啟動 initStars(); animate(); } } // 停止動畫用于頁面隱藏時節(jié)省資源 function stopAnimation() { if (animationId) { cancelAnimationFrame(animationId); animationId null; } }requestAnimationFrame(animate)這是實現(xiàn)瀏覽器動畫的標準方法。它告訴瀏覽器“在下次重繪之前執(zhí)行animate函數(shù)”。相比舊的setInterval它能與瀏覽器的刷新率同步通常是60fps確保動畫平滑并且在頁面不可見時自動暫停節(jié)省CPU和GPU資源。ctx.clearRect(0, 0, canvas.width, canvas.height)這是清除畫布的標準做法。它把指定矩形區(qū)域內(nèi)的像素設(shè)置為透明。因為我們有深色背景所以看起來就是“擦除”了上一幀的畫面。3.2.4 處理窗口大小變化與頁面可見性一個健壯的項目必須考慮響應式和資源管理。// 監(jiān)聽窗口大小變化自適應畫布尺寸 window.addEventListener(resize, () { // 防抖處理避免resize事件觸發(fā)過于頻繁 if (this.resizeTimeout) clearTimeout(this.resizeTimeout); this.resizeTimeout setTimeout(() { initCanvasSize(); // 重置畫布分辨率 // 注意星星位置是基于舊畫布坐標的重置后坐標會錯亂。 // 方案一簡單重新初始化所有星星星空會“重置”。 initStars(); // 方案二復雜根據(jù)新舊畫布比例重新計算每個星星的位置。這里采用方案一。 }, 200); }); // 利用 Page Visibility API 優(yōu)化性能 document.addEventListener(visibilitychange, () { if (document.hidden) { // 頁面不可見如切換標簽頁、最小化停止動畫 stopAnimation(); } else { // 頁面再次可見重啟動畫 startAnimation(); } }); // 頁面加載完成后啟動 window.addEventListener(load, startAnimation);實操心得resize事件處理中的“星星位置錯亂”問題是一個經(jīng)典坑點。簡單地重新初始化initStars()是最快最安全的方案用戶體驗是星空會突然“刷新”一次。如果你希望星星位置能平滑過渡就需要記錄比例并重新計算每個星星的x和y坐標邏輯會復雜很多。對于星空背景這種非精確交互的場景我通常選擇簡單重置影響不大。4. 性能優(yōu)化與高級效果拓展基礎(chǔ)版本已經(jīng)能運行得很好。但如果你想打造一個更驚艷、更專業(yè)的星空或者面對粒子數(shù)更多2000的場景就需要考慮以下優(yōu)化和拓展。4.1 性能優(yōu)化技巧離屏CanvasOffscreen Canvas場景如果星星形狀固定且復雜比如不是簡單的圓而是星形圖片每幀重繪上千次drawImage開銷很大。做法將每個星星預先繪制到一個離屏的小Canvas上。在主動畫循環(huán)中不再調(diào)用arc和fill而是直接使用drawImage將離屏的星星“圖章”復制到主畫布上。這能大幅減少繪制指令。代碼示意const offscreenCanvas document.createElement(canvas); const offscreenCtx offscreenCanvas.getContext(2d); // 在offscreenCanvas上繪制好一個星星 offscreenCtx.arc(5,5,2,0,Math.PI*2); offscreenCtx.fill(); // 在animate循環(huán)中 ctx.drawImage(offscreenCanvas, star.x, star.y);對象池Object Pool我們的reset方法已經(jīng)體現(xiàn)了對象池的思想復用對象避免垃圾回收。確保stars數(shù)組大小固定而不是不斷push和splice。減少繪制狀態(tài)變更Canvas的fillStyle、strokeStyle、globalAlpha等狀態(tài)設(shè)置是有開銷的。如果所有星星顏色和透明度差異不大可以嘗試按屬性分批繪制減少狀態(tài)切換。但在我們這個閃爍、顏色微變的場景下收益可能不明顯且代碼會變復雜。使用Web Workers將粒子位置、速度等數(shù)據(jù)的計算即update邏輯放到Web Worker線程中與UI渲染線程分離。這對于粒子數(shù)量極多數(shù)萬的復雜物理模擬有奇效。但對于千量級的星空可能引入的通信開銷得不償失。4.2 視覺增強效果添加流星創(chuàng)建一種特殊的“Meteor”粒子類擁有更快的速度、更長的尾巴。尾巴可以用繪制一條漸隱的線段或者連續(xù)繪制幾個透明度遞減的圓點來實現(xiàn)。每隔幾秒隨機生成一顆流星賦予其隨機的起始位置和方向。星空分層與視差滾動創(chuàng)建2-3個stars數(shù)組分別代表“遠景慢星”、“中景中速星”、“近景快星”。賦予它們不同的速度(vy)和大小(radius)。在更新時近景星移動快遠景星移動慢從而產(chǎn)生強烈的3D縱深感和沉浸感。這是讓星空“活過來”最有效的一招。交互式星空監(jiān)聽mousemove事件根據(jù)鼠標位置計算一個“力場”影響附近星星的速度(vx, vy)讓星星像被鼠標吸引或推開一樣流動。這需要為Star類增加一個applyForce(vx, vy)方法。背景星云在Canvas最底層用createRadialGradient或createLinearGradient繪制幾片半透明的、顏色柔和的色塊如深藍、紫色、暗紅作為星云的背景。注意要設(shè)置globalAlpha為很低的值如0.1并且只在初始化或窗口重置時繪制一次不要放在動畫循環(huán)里否則性能堪憂。5. 常見問題與調(diào)試實錄在實現(xiàn)過程中你幾乎一定會遇到下面這些問題。這里是我的排查記錄和解決方案。5.1 問題星星閃爍生硬像在“跳動”而不是“呼吸”。排查檢查閃爍算法。如果用的是Math.random()直接設(shè)置alpha變化就會不連續(xù)。解決如前所述改用基于Math.sin()或Math.cos()的周期性函數(shù)?？梢哉{(diào)整flickerSpeed改變閃爍頻率調(diào)整正弦波的振幅改變明暗變化幅度。5.2 問題動畫卡頓幀率FPS很低。排查步驟打開瀏覽器開發(fā)者工具F12的“性能Performance”面板錄制幾秒動畫查看主要耗時在“腳本Scripting”還是“渲染Rendering”。減少粒子數(shù)量將STAR_COUNT從1500降到800看是否立即流暢。這是最直接的驗證。檢查循環(huán)內(nèi)的操作是否在animate函數(shù)或Star.draw中執(zhí)行了昂貴的操作比如console.log、復雜的數(shù)學計算、DOM操作等。解決方案確保console.log不在動畫循環(huán)中。使用上節(jié)提到的離屏Canvas優(yōu)化繪制?？紤]使用requestAnimationFrame的回調(diào)參數(shù)timestamp來實現(xiàn)時間差deltaTime動畫讓動畫速度與幀率解耦避免在高刷新率屏幕如144Hz上運行過快。let lastTime 0; function animate(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; // 更新星星時使用 deltaTime * 0.001 來調(diào)節(jié)速度使其與時間相關(guān)而非幀數(shù)相關(guān) // this.x this.vx * (deltaTime * 0.001); }5.3 問題畫布在高分辨率屏幕如Retina屏上模糊。原因Canvas的CSS寬高和其width/height屬性不一致。在Retina屏上1個CSS像素可能對應2個物理像素。如果我們只設(shè)置CSS為全屏而canvas.width等于window.innerWidth那么繪圖表面分辨率不足就會被拉伸導致模糊。解決獲取設(shè)備的設(shè)備像素比devicePixelRatio并依此放大Canvas的繪圖表面。function initCanvasSize() { const dpr window.devicePixelRatio || 1; const rect canvas.getBoundingClientRect(); // 設(shè)置Canvas元素的實際顯示尺寸CSS像素 canvas.style.width ${rect.width}px; canvas.style.height ${rect.height}px; // 設(shè)置繪圖表面的分辨率物理像素 canvas.width rect.width * dpr; canvas.height rect.height * dpr; // 縮放繪圖上下文讓后續(xù)所有繪制坐標自動適配高分辨率 ctx.scale(dpr, dpr); }經(jīng)過這樣處理繪制出的星星邊緣會非常銳利清晰。5.4 問題窗口改變大小時星星位置錯亂或聚集。原因如3.2.4節(jié)所述星星的坐標(x, y)是基于舊畫布尺寸的。畫布突然變大所有星星仍集中在左上角原始區(qū)域畫布變小部分星星會跑到畫布外。解決如前所述在resize事件中重新初始化initStars()是最簡單的方法。如果要求高就需要做坐標映射。5.5 問題想用圖片代替圓形作為星星。解決在Star類中加載圖片并在draw方法中使用ctx.drawImage。class Star { constructor() { this.img new Image(); this.img.src star.png; // 小星星圖片 this.reset(true); } draw() { if (this.img.complete) { // 繪制圖片注意坐標要減去寬高的一半以居中 ctx.drawImage(this.img, this.x - this.radius, this.y - this.radius, this.radius*2, this.radius*2); } else { // 圖片未加載完用圓形兜底 ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); ctx.fill(); } } }注意加載數(shù)百張相同的圖片是巨大的浪費。應該只創(chuàng)建一個Image對象然后在所有星星的draw方法中共享引用。同時務必做好加載狀態(tài)判斷否則會繪制空白。這個項目從簡單的圓點開始通過逐步添加速度、閃爍、光暈、分層、交互最終可以演變出一個極具視覺沖擊力和趣味性的動態(tài)星空。它不僅是前端動畫的入門石更是理解計算機圖形學中粒子系統(tǒng)、動畫循環(huán)、性能優(yōu)化等核心概念的絕佳實踐。希望這份詳細的拆解和實錄能幫助你不僅實現(xiàn)效果更能理解背后的每一行代碼為何如此書寫。