花飞飞 发表于 2025-8-29 20:20
你真会设计切的公式，怎么用都好用，还是万能的。
也不是万能，多个能吧
马黑黑 发表于 2025-8-29 20:21
没有黑的，只有灰的{:4_170:}
马黑黑 发表于 2025-8-29 20:22
也不是万能，多个能吧
多能就是大能，也是万能{:4_173:}
<img id="girl" width="400" height="400" src="https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif" alt="" />
<script type="module">
var path = createStartPath(50, 180, .5);
girl.style.setProperty('clip-path',`path('${path}')`);
// 创建星形函数，参数：
// lines 边的总数
// r1 外圆半径（确定顶角，取值依据为正方形边长）
// r2 内圆半径（确定控制点，取值依据为曲线曲率期望值）
// 注意 ：r1 > r2 是设计初衷
function createStartPath(lines, r1, r2=0) {
var a = 360 / lines, path = 'M', bx1, by1, bx2, by2;
Array.from({length: lines}).forEach((_,k) => {
var a1 = a * k,
a2 = a1 - a / 2,
x1 = (r1 + r1 * Math.cos(Math.PI / 180 * a1)).toFixed(2),
y1 = (r1 + r1 * Math.sin(Math.PI / 180 * a1)).toFixed(2),
x2 = (r1 + r2 * Math.cos(Math.PI / 180 * a2)).toFixed(2),
y2 = (r1 +r2 * Math.sin(Math.PI / 180 * a2)).toFixed(2);
if (k === 0) {
bx1 = x1;
by1 = y1;
bx2 = x2;
by2 = y2;
path += `${x1} ${y1} `;
} else {
path += `Q${x2} ${y2},${x1} ${y1} `;
}
if (k === lines - 1) path += `Q${bx2} ${by2},${bx1} ${by1}`;
});
return path;
}
</script>
杨帆 发表于 2025-8-29 21:12
var path = createStartPath(50, 180, .5);
girl.style.setProperty('clip-path',`path('${path}')` ...
漂亮
花飞飞 发表于 2025-8-29 21:06
多能就是大能，也是万能
万能没有人可以达到
花飞飞 发表于 2025-8-29 21:05
没有黑的，只有灰的
灰黑是近亲
马黑黑 发表于 2025-8-29 19:44
只能试试，毕竟不专门作处理
嗯嗯，现在这个好看{:4_187:}
马黑黑 发表于 2025-8-29 19:44
这是划线外凸的效果
是的，把数字调了一下{:4_173:}
马黑黑 发表于 2025-8-29 19:45
就一个小函数，也许可以做些改动，还能做出更多的效果
这个函数很漂亮了，还能有一些变化，就更好了。{:4_187:}
红影 发表于 2025-8-29 23:44
这个函数很漂亮了，还能有一些变化，就更好了。
这个函数可以脱离svg，就是说，使用的是svg的路径，却可以木有svg标签
红影 发表于 2025-8-29 23:42
是的，把数字调了一下
需要调整的
红影 发表于 2025-8-29 23:42
嗯嗯，现在这个好看
{:4_191:}
马黑黑 发表于 2025-8-29 21:55
万能没有人可以达到
万万不能我可以{:4_170:}
马黑黑 发表于 2025-8-29 21:55
灰黑是近亲
黑就是灰灰就是黑
花飞飞 发表于 2025-8-30 11:45
黑就是灰灰就是黑
反正也差不多
花飞飞 发表于 2025-8-30 11:45
万万不能我可以
万万能力不行
马黑黑 发表于 2025-8-30 08:39
这个函数可以脱离svg，就是说，使用的是svg的路径，却可以木有svg标签
具体是怎么实现的呢？
马黑黑 发表于 2025-8-30 08:39
需要调整的
这个很神奇，图片这样切一下很漂亮{:4_187:}
马黑黑 发表于 2025-8-30 08:39
神奇的星形切图路径。