嗨
本文是该文章的一部分： 网站更新 - Thun888

散步的时候看到天上的云挺漂亮的，就想着能不能给网站上也加上几朵云，根据天气实时更改网页背景的云朵密度

就从内容可视度的角度决定只是改动左侧栏的背景
至于图像生成，一开始有这个思路的时候我直接让AI写了一个，然后他生成出来也太真实了一点

cloud.png
cloud.png

这个显然不太合适
那认真考虑一下，现在是需要怎么样的云，从风格上来看的话，我更偏向于像素化的云

比如说这个世界盒子里面的
比如说这个世界盒子里面的

但是考虑到在实际情况下，如果使用一个高清晰度的素材再被作为背景的话，那就会影响可读性。为了降低影响最直接的方法就是高斯模糊了，但是这样子的话就没必要保留那么多的细节
那不妨看一下云的组成，是一个一个水分子组成的，水分子可以抽象成一个球体模型，在微观角度上，一朵云就是由几十亿个水分子组成的，几十亿个球重叠在一起，从而显现出了一朵云的形状，那不妨我们做出一些相应的简化，比如说直接使用5个圆形叠加生成，这个时候就得到一个简略版的云了，类似这样

效果
效果

绘制逻辑：随机一个点为初始点，在一定距离范围内随机下一个点，重复若干次，绘制以其为圆心的圆

obt3.gif
obt3.gif

单一的云朵觉得还是略显单调了一点，如果它能进行动态生成使得每一次生成的位置都不一样那就更具可玩性了，在此基础上我希望它能够被现实赋予更多的特性，比如说云朵的数量和颜色，背景的颜色（比如随着时间动态调整）等等

下文来自「使用小米天气接口获取天气信息」

一开始我是想用和风天气的api来获取云量，但是我试了半天都返回400错误，我干脆就用小米天气的api接口来获取天气的信息。感谢ClassIsland在获取小米天气数据方面的成果

虽然获取不到云量这个直接数字，但是天气状况跟云量其实也是呈正相关的，那就可以用天气代码来替代了，这里将云朵的颜色与天气代码挂钩

天气代码索引表

编码中文描述
00晴
01多云
02阴
03阵雨
04雷阵雨
05阵雨伴有冰雹
06雨夹雪
07小雨
08中雨
09大雨
10暴雨
11大暴雨
12特大暴雨
外部引用截止

最终结果就这样了，虽然你认真看也不一定看得出来这是朵云，不过我这里主要起到一个点缀的作用，咱也不能喧宾夺主是吧

效果
效果

后来迁移到前端，使用canvas进行渲染

有个意外发现在境内或者境外来请求同一个城市的天气信息的时候，当然天气的值会有出入，比如说在国外请求湛江是8，在国内是7
可能是在缓存策略上有所不同，为了保证数据不因为过时数据而导致别的问题，所以直接砍掉了分钟级的预报

AI对不同数据的分析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
好的，我们来比较一下这两个 JSON 数据，看看有什么不同之处。

### 主要区别概览

第二个 JSON 对象比第一个多了 `minutely` (分钟级) 降水预报。此外，两者在 `current` (当前天气状况), `forecastDaily` (每日预报), `forecastHourly` (逐小时预报) 和 `alerts` (预警信息) 的一些具体数值上也存在差异。

### 详细差异对比

#### 1. 新增信息
*   **分钟级降水预报 (`minutely`)**: 第二个 JSON 对象中包含了详细的分钟级降水信息，而第一个则没有此项。

#### 2. 当前天气状况 (`current`)
*   **天气现象 (`weather`)**: 第一个为 "中雨" (代码 8)，第二个为 "小雨" (代码 7)。
*   **风向 (`wind.direction`)**: 第一个为 169.33°，第二个为 169.0°。

#### 3. 每日预报 (`forecastDaily`)
*   **降水概率 (`precipitationProbability`)**:
    *   第一个 JSON 显示未来几天有较高的降水概率，例如第二天为 72%。
    *   第二个 JSON 则显示未来几天降水概率为 0% 或非常低。
*   **天气现象 (`weather`)**: 今日天气第一个为 "中雨转多云" (代码 8 转 1)，第二个为 "小雨转多云" (代码 7 转 1)。
*   **风向与风速 (`wind`)**: 两个 JSON 对象在未来几天的风向和风速预报上存在一些数值差异。

#### 4. 逐小时预报 (`forecastHourly`)
*   **天气现象 (`weather`)**:
    *   第一个 JSON 的 18:00 时天气为 "中雨" (代码 8)。
    *   第二个 JSON 的 18:00 和 19:00 时天气为 "阴" (代码 2)。
*   **风速 (`wind`)**: 两个 JSON 在逐小时的风速预报数值上有所不同。

#### 5. 天气预警 (`alerts`)
*   **暴雨黄色预警 (` defense`)**: 第一个 JSON 在暴雨黄色预警的“防御指南”中包含三条建议，而第二个只包含一条。

#### 6. 其他细微差别
*   **更新时间 (`pubTime` 和 `updateTime`)**: 两个 JSON 的发布和更新时间有细微差别。
*   **源数据 (`sourceMaps.clientInfo.appVersion`)**: 客户端应用版本号不同。
*   **CHS 字段**: 第二个 JSON 的 `chs` 字段中多了 "CWA11" 和 "MNPCH1" 类型。

总的来说，两个 JSON 数据虽然在大部分基础信息上保持一致，但在具体的实时天气、降水概率以及部分预报细节上存在明显差异。

留下你的足迹吧~