使用JavaScrip随机生成雪花

e1y4r

已于 2022-02-11 00:27:26 修改

阅读量675

点赞数 1

文章标签：前端 svg javascript

于 2022-02-11 00:26:57 首次发布

本文链接：https://blog.csdn.net/m0_47454622/article/details/122871959

版权

这篇博客介绍了作者受冬奥雪花启发，使用JavaScript实现SVG雪花生成的过程。程序通过固定随机数种子创建独一无二的雪花图案，图案由圆形、相交圆和几何形状组合，且尺寸随远离中心而递减。颜色则借鉴了中国色网站的随机生成。代码已开源在GitHub上。

摘要由CSDN通过智能技术生成

随机生成雪花

受到冬奥专属雪花的启发，我也实现了一个类似的雪花生成的程序。如下图是我的代码生成的雪花，与原版有一些差别。我猜测原版是用了类似剪纸的操作，在位图上进行镜像与复制生成雪花。而这里的实现直接在雪花每个分支上生成相同的图案以生成SVG。
配色借鉴了中国色（zhongguose.com）的颜色随机生成。
在这里插入图片描述

生成过程比较简单：其中雪花图案的位置如下图是固定的，大小与图案是随机生成的。而且生成图案的大小随着图案远离雪花中心，图案的尺寸呈逐渐缩小的趋势。图案由圆形以及两个圆形相交形成的图案或者六边形以及菱形组成。在雪花每个分支上相同的位置生成相同的尺寸、相同颜色的同种图案。
在这里插入图片描述

固定随机数生成器的种子即可生成独一无二的雪花图案。

<html>
  <body>
    <snowflake-svg width="100" height="100" seed="9036"></snowflake-svg>
  </body>
  <script src="script/snowflake.js"></script>
</html>