正弦与余弦函数在JS中的应用举例

马黑黑

马黑黑

代码

1. <style>
   
2. #wrap {
   
3.         margin: 20px auto;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         border-radius: 50%;
   
7.         border: 1px dotted gray;
   
8.         position: relative;
   
9. }
   
10. .circle {
    
11.         position: absolute;
    
12.         width: 30px;
    
13.         height:30px;
    
14.         text-align: center;
    
15.         line-height: 30px;
    
16.         border-radius:50%;
    
17.         border: 1px solid tan;
    
18. }
    
19. </style>
    
20. 
    
21. <div id="wrap"></div>
    
22. 
    
23. <script>
    
24. let x0 = y0 = r = wrap.offsetWidth / 2, total = 10;
    
25. for(let i = 0; i < total; i ++) {
    
26.         let x1 = x0 + r * Math.cos(360 / total * i * Math.PI / 180),
    
27.                 y1 = y0 + r * Math.sin(360 / total * i  * Math.PI/180);
    
28.         let span = document.createElement('span');
    
29.         span.className = 'circle';
    
30.         span.innerText = i + 1;
    
31.         span.style.cssText += `
    
32.                 left: ${x1 - 15}px;
    
33.                 top: ${y1 - 15}px;
    
34.         `;
    
35.         wrap.appendChild(span);
    
36. }
    
37. </script>

复制代码

马黑黑

JS代码解释：

24行：x0，y0 是子元素绕圈圈的圆心坐标，r 为半径，它们都是基于父元素的，都是父元素的宽度的一半；total 是子元素总数。

25-36行：for循环语句，其中：

    26和27行：计算第 i 个子元素的xy坐标{x1, y1}，它们分别对应于 cos 和 sin 函数，即余弦与正弦函数，用此两个函数求出对应子元素的圆心坐标；

    余下各行：创建元素，设定元素内容与相关属性，并一一添加到父元素中。

马黑黑

我们过去用CSS的transform方法实现相同的效果，其内部原理其实也是差不多的，不同的是，transform方法是利用子元素自身的旋转（rotate）和位移（translate）的关系“弹”出去的，元素上的文字或图像会跟随旋转不同的角度，故此需要在最后将元素逆转相同的角度。

马黑黑

sin和cos都是基于直角三角形，它们又与圆有关，需要的知识属于中学的。至于应用到JS，本身并不复杂，仅是数学上的东东换成JS的语句而已。

红影

谢谢黑黑，这个还标注了序号，就更清晰了

红影

马黑黑 发表于 2023-4-24 08:58
我们过去用CSS的transform方法实现相同的效果，其内部原理其实也是差不多的，不同的是，transform方法是利 ...

是的，记得做花潮时钟的时候就是要逆转角度的

红影

再来学习一遍；父元素的重心是圆心，0方向为向右方向，顺时针，数学计算公式里的角度需使用弧度。
i 的取值是0-9，所以貌似分母可以为0，好像得到的值也是0

马黑黑

红影 发表于 2023-4-24 10:03
谢谢黑黑，这个还标注了序号，就更清晰了

对于有数学基础的，应该不难理解

马黑黑

红影 发表于 2023-4-24 10:05
是的，记得做花潮时钟的时候就是要逆转角度的

这是CSS transform转换的小技巧

马黑黑

红影 发表于 2023-4-24 10:19
再来学习一遍；父元素的重心是圆心，0方向为向右方向，顺时针，数学计算公式里的角度需使用弧度。
i 的取 ...

分母不会为0的，是分子。算式里，除数只有 total 和 180，没有别的。

所有的子元素的圆心xy坐标，都通过算式计算，i 为 0 时指第一个子元素，∠θ 是 0 度，换算为弧度因为乘以 0 所以也是0，其行为是它从父元素的圆心处向右做水平方向的运动。

樵歌

一评分大圈圈上小圈圈不見了

红影

马黑黑 发表于 2023-4-24 11:55
对于有数学基础的，应该不难理解

嗯嗯，这个真不难，这个例子最清晰了。

红影

马黑黑 发表于 2023-4-24 11:56
这是CSS transform转换的小技巧

保证文字朝向是对的。

红影

马黑黑 发表于 2023-4-24 12:02
分母不会为0的，是分子。算式里，除数只有 total 和 180，没有别的。

所有的子元素的圆心xy坐标，都通 ...

是的，我看错了

马黑黑

红影 发表于 2023-4-24 20:54
是的，我看错了

理论上，分母不可能是0

马黑黑

红影 发表于 2023-4-24 20:53
保证文字朝向是对的。

嗯，是这个意思

马黑黑

红影 发表于 2023-4-24 20:52
嗯嗯，这个真不难，这个例子最清晰了。

算式其实是简单的，JS语句也不复杂

马黑黑

樵歌 发表于 2023-4-24 13:50
一评分大圈圈上小圈圈不見了

没有做预处理。刷新一下就好。

樵歌

马黑黑 发表于 2023-4-24 22:32
没有做预处理。刷新一下就好。

圈圈里可以写字不