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