中秋孔明灯网页代码介绍一、概述本代码是一个以中秋佳节为主题的纯前端单文件交互作品。页面通过 Canvas 绘图技术营造出明月当空、繁星点点、孔明灯升腾、桂花飘落的唯美夜空意境并支持用户点击屏幕任意位置放飞孔明灯。整个项目不依赖任何外部库仅用原生 HTML CSS JavaScript 实现结构清晰、易于阅读和扩展。我用夸克网盘给你分享了「中秋代码」点击链接或复制整段内容打开「夸克APP」即可获取。/b5c43afiAI链接https://pan.quark.cn/s/c55c74b37f7c二、页面结构页面的 DOM 结构非常简洁canvasidstars/canvas!-- 星空层 --canvasidlanterns/canvas!-- 孔明灯层 --canvasidpetals/canvas!-- 桂花飘落层 --dividmoon/div!-- 月亮 --divclasspoem.../div!-- 诗句 --divclassfooter.../div!-- 底部提示 --divclasstip.../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){letxe.clientX,ye.clientY;// 支持触摸for(leti0;i3;i){makeLantern(x(Math.random()-0.5)*40,y(Math.random()-0.5)*30,...);}}监听器绑定在document上实现全屏点击响应。六、响应式与修复要点1. 画布尺寸同步resize()函数负责把三个画布的绘图缓冲区同步为窗口尺寸functionresize(){WinnerWidth;HinnerHeight;starC.widthW;starC.heightH;lC.widthW;lC.heightH;pC.widthW;pC.heightH;makeStars();}2. 监听全屏点击事件由lanterns画布改为绑定到document避免被上层pointer-events: none的元素拦截。它既适合作为节日主题的小作品分享也是学习 Canvas 动画、分层渲染、粒子系统的一个优秀示例。以上内容由AI辅助生成 【纯前端适合分享】中秋孔明灯网页代码
中秋孔明灯网页代码介绍一、概述本代码是一个以中秋佳节为主题的纯前端单文件交互作品。页面通过 Canvas 绘图技术营造出明月当空、繁星点点、孔明灯升腾、桂花飘落的唯美夜空意境并支持用户点击屏幕任意位置放飞孔明灯。整个项目不依赖任何外部库仅用原生 HTML CSS JavaScript 实现结构清晰、易于阅读和扩展。我用夸克网盘给你分享了「中秋代码」点击链接或复制整段内容打开「夸克APP」即可获取。/b5c43afiAI链接https://pan.quark.cn/s/c55c74b37f7c二、页面结构页面的 DOM 结构非常简洁canvasidstars/canvas!-- 星空层 --canvasidlanterns/canvas!-- 孔明灯层 --canvasidpetals/canvas!-- 桂花飘落层 --dividmoon/div!-- 月亮 --divclasspoem.../div!-- 诗句 --divclassfooter.../div!-- 底部提示 --divclasstip.../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){letxe.clientX,ye.clientY;// 支持触摸for(leti0;i3;i){makeLantern(x(Math.random()-0.5)*40,y(Math.random()-0.5)*30,...);}}监听器绑定在document上实现全屏点击响应。六、响应式与修复要点1. 画布尺寸同步resize()函数负责把三个画布的绘图缓冲区同步为窗口尺寸functionresize(){WinnerWidth;HinnerHeight;starC.widthW;starC.heightH;lC.widthW;lC.heightH;pC.widthW;pC.heightH;makeStars();}2. 监听全屏点击事件由lanterns画布改为绑定到document避免被上层pointer-events: none的元素拦截。它既适合作为节日主题的小作品分享也是学习 Canvas 动画、分层渲染、粒子系统的一个优秀示例。以上内容由AI辅助生成 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
