用 clip-path: polygon() 绘制星形线

马黑黑

查看代码

马黑黑

核心 JS 代码：

1. let toPercent = (num1,num2) => (num2 / num1 * 100).toFixed(2) + '%'; /* 转百分比 */
   
2. 
   
3. let mkAstroid = (ww) => {
   
4. /*
   
5.         星形线参数方程式：x = a*(cost)^3，y = a*(sint)^3
   
6.         其中：a 为原点到曲线与X轴相交的距离，是圆的半径；t 为参数，0≤ t ≤2π
   
7.        
   
8.         自定义函数参数 ww 为正方形元素宽高尺寸
   
9.         for 语句 [x,y] 加 a 是为了将裁剪点移到可视区域；
   
10.         循环步进 i += Math.PI/20 除数越大星形边缘越平滑
    
11. */
    
12.         let a = ww / 2, arr = [];
    
13.         for(let i = 0; i <= 2 * Math.PI; i += Math.PI/20) {
    
14.                 let x = a * Math.pow(Math.cos(i), 3) + a;
    
15.                 var y = a * Math.pow(Math.sin(i), 3) + a;
    
16.                 arr.push(toPercent(a * 2, x) + ' ' + toPercent(a * 2, y));
    
17.         }
    
18.         return `polygon(${arr.join(', ')})`;
    
19. }

复制代码

马黑黑

函数 mkAstroid(ww) 的调用（假如我们要裁剪 id="mybox" 盒子）：

    mybox.style.clipPath = mkAstroid(200);

其中，参数值 200 指 mybox 盒子的宽高尺寸（宽=高=200px）。

马黑黑

星形线的定义之一：

星形线属于内摆线，内摆线顾名思义就是在一个半径为a的动圆A上固定一点p，然后这个动圆A绕着半径为b的定圆B的"内侧"滚动一周，p点所形成的轨迹就是内摆线。

樵歌

端午快乐，多吃几个甜的

马黑黑

樵歌 发表于 2023-6-22 07:34
端午快乐，多吃几个甜的

甜粽不好吃

马黑黑

醉美水芙蓉 发表于 2023-6-22 07:19
老师好早呀！端午节安康！

谢谢，同样祝你

红影

这个数学公式实际不知道的，去搜一下，是让一个半径为原半径1/4的圆，沿着圆的圆周旋转得到的轨迹。嗯，挺难理解的。不过图形很漂亮

红影

循环步进 i += Math.PI/20 除数越大星形边缘越平滑，Math.PI对应180度，也就是整个360方向取了40个点。这个倒是没用上次那个图形取点多呢。

马黑黑

红影 发表于 2023-6-22 12:37
这个数学公式实际不知道的，去搜一下，是让一个半径为原半径1/4的圆，沿着圆的圆周旋转得到的轨迹。嗯，挺 ...

有各种理解。从数学上讲，星形线是内摆线，有自己的参数公式，即——

x = a*(cost)^3，y = a*(sint)^3

然后，按这个公式去实现便可以了。

而更形象、通俗的解释，请查地板的定义。星形线和心形线某种意义上其实正好相反：前者动圆在内，后者动圆在外。

马黑黑

红影 发表于 2023-6-22 12:45
循环步进 i += Math.PI/20 除数越大星形边缘越平滑，Math.PI对应180度，也就是整个360方向取了40个点。这 ...

我已经编写好的桃心形函数也采用这个循环方式，生成的裁剪代码也不是瀑布型的

南无月

这个图形好靓~~很是喜欢。。

南无月

马黑黑 发表于 2023-6-22 12:54
我已经编写好的桃心形函数也采用这个循环方式，生成的裁剪代码也不是瀑布型的

瀑布占地方。。。看到桃心形了，代码很友好，一把可以抓走

马黑黑

南无月 发表于 2023-6-22 13:16
瀑布占地方。。。看到桃心形了，代码很友好，一把可以抓走

马黑黑

南无月 发表于 2023-6-22 13:15
这个图形好靓~~很是喜欢。。

css-doodle很容易做这个

南无月

马黑黑 发表于 2023-6-22 15:06

一般瀑布都是个景点

南无月

马黑黑 发表于 2023-6-22 15:06
css-doodle很容易做这个

看你做什么都容易

马黑黑

南无月 发表于 2023-6-22 17:33
看你做什么都容易

也不是这么说

马黑黑

南无月 发表于 2023-6-22 17:32
一般瀑布都是个景点

大约吧