马黑黑 发表于 2023-11-4 11:09

在线制作svg太阳花图案

本帖最后由 马黑黑 于 2023-11-4 11:44 编辑

本楼出现意外，请移步到新的帖子：

svg太阳花图案在线制作 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

马黑黑 发表于 2023-11-4 11:13

程序提供的代码是 polygon 标签的 points 属性值。svg预设 400*400 的规格：

<svg width="400" height="400">
    <polygon id="poly" points="0,0 0,0 0,0" fill-rule="nonzero | evenodd" fill="red" stroke="green" stroke-width="2" />
</svg>

马黑黑 发表于 2023-11-4 11:19

一楼的JS代码，参考了一个 Python 程序，将其核心内容改写成JavaScript，保留源程序的变量和自定义的函数名。这里是首发。

算法的精髓在于连线的计算，这是非常巧妙的设计。

马黑黑 发表于 2023-11-4 11:22

顶点数指圆周上的点，就是最终呈现出来的尖角。出于对称考虑，滑杆的设计，以 4 为步进单位，凡正向被 4 整除的顶点数，均能做出对称的图案。

红影 发表于 2023-11-4 13:27

我去新帖子看看。。。

马黑黑 发表于 2023-11-4 19:20

红影 发表于 2023-11-4 13:27
我去新帖子看看。。。

嗯嗯
页: [1]
查看完整版本: 在线制作svg太阳花图案