svg太阳花图案在线制作
<style>.papa { margin: auto; width: 700px; display: grid; place-items: center; }
.papa svg { margin: 10px 0; width: 400px; height: 400px; }
.papa output { margin: 10px 0; }
.setting { display: flex; align-items: center; gap: 8px; }
</style>
<div class="papa">
<p class="setting">
<svg>
<polygon id="poly" points="0,0 0,0 0,0" fill-rule="nonzero" fill="none" stroke="green" stroke-width="2" />
</svg>
</p>
<p class="setting">
<label for="angRng">设置顶点数: </label>
<input id="angRng" type="range" min="4" max="80" step="4" value="4" />
<output id="angNum">4</output>
<label> || 填充模式 : </label>
<input id="f1" type="radio" name="fill" value="" checked />
<label for="f1">无</label>
<input id="f2" type="radio" name="fill" value="nonzero" />
<label for="f2">nonzero</label>
<input id="f3" type="radio" name="fill" value="evenodd" />
<label for="f3">evenodd ||</label>
</p>
<output id="pointscode">操作方法：① 拖动滑杆选择顶点数 ② 选择填充模式</output>
</div>
<script>
(function(){
function circle_point(num, x=200, y=200, r=200, anglepy=0) {
let step = 2 * Math.PI / num;
let start = anglepy / 180 * Math.PI;
let points = [];
for (let i = 0; i < num; i++) {
let an1 = step * i + start;
let tmpx = Math.cos(an1);
let tmpy = -Math.sin(an1);
let px = (tmpx * r + x).toFixed(2);
let py = (tmpy * r + y).toFixed(2);
points.push();
}
return points;
}
function starN(num, x=200, y=200, r=200, anglepy=0) {
let point0s = circle_point(num, x, y, r, anglepy);
let step = Math.floor((num - 3) / 2);
let list1 = pointskip(num, step);
let point1s = [];
for (let i of list1) {
point1s.push(point0s);
}
return point1s;
}
function pointskip(n, k) {
let list0 = Array.from({length: n}, (_, i) => i);
let total_list = list0.flatMap(() => list0);
let list1 = [];
let i = 0;
while (i < n * n) {
let id = total_list;
if (list1.includes(id)) {
i += 1;
continue;
}
list1.push(id);
i += (k + 1);
}
return list1;
}
angRng.oninput = () => {
angNum.innerText = angRng.value;
let points = starN(angRng.value).join(' ');
pointscode.innerText = 'points="' + points + '"';
poly.setAttribute('points',points);
};
let fills = document.getElementsByName('fill');
fills.forEach((item,key) => {
item.onclick = () => {
let fillcolor = key > 0 ? 'red' : 'none';
poly.setAttribute('fill',fillcolor);
poly.setAttribute('fill-rule',item.value);
};
});
poly.setAttribute('points',starN(4).join(' '));
})();
</script>
帮你把那个帖子里的说明文字搬来（分别是2、3、4楼的）：
程序提供的代码是 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>
一楼的JS代码，参考了一个 Python 程序，将其核心内容改写成JavaScript，保留源程序的变量和自定义的函数名。这里是首发。
算法的精髓在于连线的计算，这是非常巧妙的设计。
顶点数指圆周上的点，就是最终呈现出来的尖角。出于对称考虑，滑杆的设计，以 4 为步进单位，凡正向被 4 整除的顶点数，均能做出对称的图案。
醉美水芙蓉 发表于 2023-11-4 11:54
加了颜色更加漂亮！
{:4_181:} 呵呵，挺神的，我也可以点出美丽的团案了 上海朝阳 发表于 2023-11-4 12:59
呵呵，挺神的，我也可以点出美丽的团案了
嗯嗯，简单的 看到这个，跑去看了半天的Python 程序。原来它是一种计算机语言，Python是从ABC发展起来，并且结合了Unix shell和C的习惯。它拥有众多的科学计算扩展库，为Python提供了快速数组处理、数值运算以及绘图功能。因此Python语言及其众多的扩展库所构成的开发环境十分适合工程技术、科研人员处理实验数据、制作图表，甚至开发科学计算应用程序。 这个厉害 了，可以得到范围内的任意点数（瓣数）的太阳花。
计算和展示这么快的{:4_199:} 黑黑大侠太厉害了，这个居然可以直接在线编辑{:4_178:} 好漂亮的太阳花，这个可以直接变色，厉害了 黑黑辛苦，谢谢分享精彩的在线制作{:4_187:} 老师厉害！{:4_195:} 俺来欣赏学习下{:4_187:} 千羽 发表于 2023-11-4 14:37
俺来欣赏学习下
晚上嚎嚎 红影 发表于 2023-11-4 13:31
帮你把那个帖子里的说明文字搬来（分别是2、3、4楼的）：
程序提供的代码是 polygon 标签的 points 属性值 ...
谢谢。辛苦了{:4_190:} 马黑黑 发表于 2023-11-4 19:21
晚上嚎嚎
黑黑老师嚎嚎{:4_173:} 亦是金 发表于 2023-11-4 14:17
老师厉害！
你前面问过制作方法，这是其中的一种。
然后，我们会有很多选择。例如：
你会ps，那么，你用ps做一个图案，然后通过插件，生成path；
或者，去网站找找 svg 可视化制作软件，比如Inkscape 之类的，它们能直接制作 svg 图案，保存后可以用记事本打开，可以找到里面的相关代码。此类软件，也有在线版的，不用安装。 小辣椒 发表于 2023-11-4 14:16
黑黑辛苦，谢谢分享精彩的在线制作
{:4_191:}