绘制等高线页面背景图

后来在生成文章背景图的时候意外的发现这种类似于等高线的曲线样式其实还怪好看的，所以说能不能将它直接应用到网页的背景中呢

也不是很突兀，不会影响文章内容的可读性。一开始我打算通过ip来推测用户所在地区，然后在那个大概的区域的一个范围内，随机获取一部分高度数据，然后将其转换成等高线的图片，然后最后再取随机的倍率和随机旋转角度进行裁切最后显示，但似乎没有开放的接口能直接获取，所以说要换一个思路，使用纯数学方法来实现。我一开始打算借用物理中电势图的思路，随机多个电荷量大小不同的点电荷，将场强叠加后得到多个三维坐标，再用画等距等高线的方法来标记点位，连接成线。不过喂给AI半天都搞不出来一个可行的，干脆让它自己发挥了，效果拔群

其实还有个思路

从结果出发，可近似处理为若干椭圆叠加：

1. 新建画布 1920 x 1080
2. 在画布中随机2个点作为焦点
3. 随机 2a 的长度，绘制椭圆，绘制完毕后检查有无在画面内
4. 固定其中一个焦点，随机一个焦点（可选：是否在外部）
5. 再次绘制椭圆，绘制完毕后检查有无与原椭圆重叠
6. 作新焦点对的连线和中垂线，在交点处作一条直线，且该直线与中垂线有正负15°到正负60°的夹角
7. 在新直线上距离交点处正负50px到正负100px的地方再随机取2个点作为焦点，该步骤视为第二步重复以上操作5次
   效果嘛。。他应该没懂我意思

不过结果没眼看

在完成实装后发现加载有些许卡顿，排查发现绘制背景太慢了，目前改成了自动缓存渲染结果（10分钟）

添加缓存前

缓存后