企业官网建设流程全解析

中秋孔明灯网页代码介绍

一、概述

本代码是一个以"中秋佳节"为主题的纯前端单文件交互作品。页面通过 Canvas 绘图技术，营造出"明月当空、繁星点点、孔明灯升腾、桂花飘落"的唯美夜空意境，并支持用户点击屏幕任意位置放飞孔明灯。

整个项目不依赖任何外部库，仅用原生 HTML + CSS + JavaScript 实现，结构清晰、易于阅读和扩展。

我用夸克网盘给你分享了「中秋代码」，点击链接或复制整段内容，打开「夸克APP」即可获取。
/_b5c43afiAI😕
链接：https://pan.quark.cn/s/c55c74b37f7c

二、页面结构

页面的 DOM 结构非常简洁：

<canvasid="stars"></canvas><!-- 星空层 --><canvasid="lanterns"></canvas><!-- 孔明灯层 --><canvasid="petals"></canvas><!-- 桂花飘落层 --><divid="moon"></div><!-- 月亮 --><divclass="poem">...</div><!-- 诗句 --><divclass="footer">...</div><!-- 底部提示 --><divclass="tip">...</div><!-- 角落提示 -->

（背景 → 星空 → 月亮 → 孔明灯 → 桂花 → 文字），层次分明。

三、视觉设计

1. 背景与配色

背景使用深蓝渐变，从夜空黑过渡到深邃蓝，营造出静谧的夜空氛围；文字采用暖金色#f5e6c8，与月亮、灯火呼应。

2. 月亮

月亮由一个div配合径向渐变实现，通过box-shadow制造光晕，并用伪元素::after叠加多个径向渐变模拟月表陨石坑的纹理感。

3. 诗句

左上角"海上生明月，天涯共此时"的诗句，使用clamp()实现响应式字号，并配以阴影增强可读性。

四、核心动画逻辑

整个动画由一个requestAnimationFrame主循环驱动：

functionframe(t){drawStars(t);updateLanterns(t);drawLanterns(t);drawPetals(t);requestAnimationFrame(frame);}

1. 星空

根据屏幕面积按比例生成数量合适的星点，每颗星有独立的闪烁相位与频率，通过sin函数控制透明度实现闪烁效果。

2. 孔明灯

每盏孔明灯是一个对象，包含位置、大小、上升速度、摆动幅度/频率、透明度、火焰相位等属性。绘制时通过quadraticCurveTo二次贝塞尔曲线勾勒出灯体的鼓腹造型，再用径向渐变叠加暖光，底部画出框架线，最后绘制跳动的火焰。

孔明灯会持续上升，并在接近屏幕顶部时淡出消失；同时维持一个基础数量自动生成，营造氛围。

3. 桂花飘落

每朵桂花由 4 个椭圆瓣组成，以Math.PI / 2间隔向四个方向排列，颜色为金黄 (hue: 38~52)。桂花带有下落速度、横向漂移、自转，并在飘出屏幕时从顶部循环重生。

五、交互功能

用户点击或触摸屏幕任意位置，即可在该位置附近随机生成 3 盏孔明灯并放飞：

functionlaunch(e){letx=e.clientX,y=e.clientY;// 支持触摸for(leti=0;i<3;i++){makeLantern(x+(Math.random()-0.5)*40,y+(Math.random()-0.5)*30,...);}}

监听器绑定在document上，实现全屏点击响应。

六、响应式与修复要点

1. 画布尺寸同步

resize()函数负责把三个画布的绘图缓冲区同步为窗口尺寸：

functionresize(){W=innerWidth;H=innerHeight;starC.width=W;starC.height=H;lC.width=W;lC.height=H;pC.width=W;pC.height=H;makeStars();}

2. 监听全屏点击

事件由lanterns画布改为绑定到document，避免被上层pointer-events: none的元素拦截。

它既适合作为节日主题的小作品分享，也是学习 Canvas 动画、分层渲染、粒子系统的一个优秀示例。

以上内容由AI辅助生成