太阳花SVG路径生成函数

马黑黑

function createSunFlowerPath(tt,R,r) { if (tt % 2 === 0) tt += 1; var a = 360 / tt, half = Math.floor(tt / 2), points = [], path = 'M'; Array.from({length:tt}).forEach((_,k) => { var x = (R + r * Math.cos(Math.PI/180 * a * k)).toFixed(2), y = (R + r * Math.sin(Math.PI/180 * a * k)).toFixed(2); points.push([x, y]); }); for (var i = half; i >= 0; i --) { var j = (half + i) % tt; path += `${points[ i ][0]} ${points[ i ][1]},${points[j][0]} ${points[j][1]} `; } path += 'Z'; return path; }

函数参数解释：

tt : 顶点数，应大于等于3，否则得到的结果不是太阳花路径。如果传值是偶数，函数会自动加1使其变为奇数；

R : 外切圆半径，取值依据是正方形宽度的一般，这样可以确保路径环绕正方形的中心点展开；

r : 外切圆半径，指太阳花顶点到正方形中心的距离，一般会比 R 小一点点。

我叫DS也做一份绘制太阳花的代码，以解决偶数顶点问题，它的思路和我的不太一样，以下是DS在我提供的代码基础上写的实现代码，它能确保奇数、偶数顶点数都可以绘制太阳花——不过它的太阳花样式和我设想的有所不同：

var total = 6; // 可以改为任意数字测试 var R = 200, r = 190, points = [], path = 'M'; var a = 360 / total; // 生成所有顶点 Array.from({length: total}).forEach((_, k) => { var x = (R + r * Math.cos(Math.PI/180 * a * k)).toFixed(2), y = (R + r * Math.sin(Math.PI/180 * a * k)).toFixed(2); points.push([x, y]); }); // 新的连接逻辑 for (var i = 0; i < total; i++) { var j = (i + Math.floor(total / 2)) % total; path += `${points[ i ][0]} ${points[ i ][1]} L ${points[j][0]} ${points[j][1]} `; } path += 'Z';

来看看结果，都是13个顶点，前面的是用我的函数画的，后面的是用DS的代码完成的：

之前，我做过一个用 polygon 实现的太阳花绘制案例，支持奇偶数顶点数，链接：polygon绘制太阳花

红影

DS明显是多连了许多线，不过也是对称着连的呢

红影

那个链接好像打不开？

马黑黑

红影 发表于 2025-9-12 21:39
DS明显是多连了许多线，不过也是对称着连的呢

它追求的是对称

马黑黑

红影 发表于 2025-9-12 21:40
那个链接好像打不开？

改好了。前面又是 [ i ] 的问题弄的

杨帆

真漂亮！谢谢马老师经典分享

马黑黑

杨帆 发表于 2025-9-12 22:32
真漂亮！谢谢马老师经典分享

红影

马黑黑 发表于 2025-9-12 21:40
它追求的是对称

你原来的那种更清爽些

红影

马黑黑 发表于 2025-9-12 21:41
改好了。前面又是 [ i ] 的问题弄的

看到了，原来的那个还是可调的，好漂亮啊

马黑黑

红影 发表于 2025-9-12 23:10
看到了，原来的那个还是可调的，好漂亮啊

还行

马黑黑

红影 发表于 2025-9-12 23:00
你原来的那种更清爽些

勉勉强强吧

花飞飞

看到了黑氏太阳花和DS太阳花，对比一下黑氏太阳更漂亮。。。
DS的机械重复是强项，设计感就少了点。显得臃肿繁杂。。

花飞飞

网站里的太阳花印象深刻，nonzero，evenodd 这两种填充模式又复习一遍了。。

红影

马黑黑 发表于 2025-9-12 23:44
还行

其实当时就惊叹过，现在继续惊叹

红影

马黑黑 发表于 2025-9-12 23:44
勉勉强强吧

条理非常清晰，更容易看得懂。

马黑黑

红影 发表于 2025-9-13 19:18
条理非常清晰，更容易看得懂。

看懂需要一点点基础

马黑黑

红影 发表于 2025-9-13 19:17
其实当时就惊叹过，现在继续惊叹

不惊掉下巴就好

红影

马黑黑 发表于 2025-9-13 20:05
看懂需要一点点基础

那是肯定的

红影

马黑黑 发表于 2025-9-13 20:05
不惊掉下巴就好

还好，我检查了一下，下巴没什么问题

马黑黑

红影 发表于 2025-9-13 21:42
还好，我检查了一下，下巴没什么问题

不顺带牵一下须？