☀️ 晴天
🌙 星空
☁️ 多云
🌥️ 阴天
🌫️ 雾
🌦️ 小雨
🌧️ 雨天
🌧️ 暴雨
❄️ 飘雪
⛈️ 雷暴

架构:双 Canvas 即时切换

页面用两套独立粒子系统各占一个 <canvas>,统一纯色底 #1a1a2e,无背景渐变。天气加载完成后直接 display 切换,无过渡动画。
元素初始切换后
背景body统一纯色 #1a1a2e,不变
Canvas 1#canvas-defaultV1 蓝色粒子display: none
Canvas 2#canvas-weatherdisplay: none天气粒子

启动时序

1. 页面加载 → 立即启动 V1 蓝色连线粒子,用户立刻看到动态效果
2. 异步调 Open-Meteo 天气 API(先尝试浏览器定位,失败则默认上海坐标)
3. 天气数据返回 → 创建天气粒子系统
4. 直接切换:天气 canvas 显示、默认 canvas 隐藏、默认粒子 destroy() 释放资源

主题选择器

左上角 🎨 按钮打开 10 种粒子主题面板,可手动切换。自动检测到的天气类型标记"自动"。点击右上角天气文字可刷新实时气温。

V1 默认粒子

蓝色圆点 rgba(14,165,233),随机大小 1-4px。粒子数 = 视口面积 / 5000。碰到边界反弹。鼠标 100px 内粒子被吸引。连线效果:任意两粒子距离 < 100px 时画线,透明度随距离衰减(O(n²))。

天气粒子(10 种)

类型视觉特点
☀️ sunny径向渐变光点正弦脉动呼吸感 + 连线
🌙 clear_night径向渐变光点正弦脉动呼吸感 + 连线
☁️ cloudy灰色小圆点缓慢漂移 + 弱连线
🌥️ overcast灰色小圆点缓慢漂移 + 弱连线
🌫️ fog大半透明模糊球15-45px,透明度 0.02-0.08
🌦️ drizzle细短线段vy 2-5,微倾斜
🌧️ rain倾斜雨滴线段vy 8-12,落底重生
🌧️ heavy_rain倾斜雨滴线段vy 12-16,落底重生
❄️ snow白点 + 光晕正弦横向摆动飘雪
⛈️ thunder大雨 + 白色 flash随机间隔闪电覆盖全屏

性能设计

粒子数量按视口面积动态计算,每种天气除数不同(大雨 area/1500 最多,晴天 area/12000 最少)。窗口 resize 时独立重建。切换后旧系统 destroy() 停止动画循环。只有晴天/多云类型才画连线,其他跳过 O(n²) 计算。
正在加载今日图片…

Hello world

正在获取天气
正在刷新…