论坛 › 马黑黑教程专版 › 正弦与余弦函数在JS中的应用举例

马黑黑 发表于 2023-4-24 08:47

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

<style>
#wrap {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px dotted gray;
        position: relative;
}
.circle {
        position: absolute;
        width: 30px;
        height:30px;
        text-align: center;
        line-height: 30px;
        border-radius:50%;
        border: 1px solid tan;
}
</style>

<div id="wrap"></div>
<div style="height: 300px"></div>

<script>
let x0 = y0 = r = wrap.offsetWidth / 2, total = 10;
for(let i = 0; i < total; i ++) {
        let x1 = x0 + r * Math.cos(360 / total * i * Math.PI / 180),
                y1 = y0 + r * Math.sin(360 / total * i* Math.PI/180);
        let span = document.createElement('span');
        span.className = 'circle';
        span.innerText = i + 1;
        span.style.cssText += `
                left: ${x1 - 15}px;
                top: ${y1 - 15}px;
        `;
        wrap.appendChild(span);
}
</script>

马黑黑 发表于 2023-4-24 08:47

代码
<style>
#wrap {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px dotted gray;
        position: relative;
}
.circle {
        position: absolute;
        width: 30px;
        height:30px;
        text-align: center;
        line-height: 30px;
        border-radius:50%;
        border: 1px solid tan;
}
</style>

<div id="wrap"></div>

<script>
let x0 = y0 = r = wrap.offsetWidth / 2, total = 10;
for(let i = 0; i < total; i ++) {
        let x1 = x0 + r * Math.cos(360 / total * i * Math.PI / 180),
                y1 = y0 + r * Math.sin(360 / total * i* Math.PI/180);
        let span = document.createElement('span');
        span.className = 'circle';
        span.innerText = i + 1;
        span.style.cssText += `
                left: ${x1 - 15}px;
                top: ${y1 - 15}px;
        `;
        wrap.appendChild(span);
}
</script>

马黑黑 发表于 2023-4-24 08:54

JS代码解释：

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

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

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

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

马黑黑 发表于 2023-4-24 08:58

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

马黑黑 发表于 2023-4-24 09:00

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

红影 发表于 2023-4-24 10:03

谢谢黑黑，这个还标注了序号，就更清晰了{:4_187:}

红影 发表于 2023-4-24 10:05

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

是的，记得做花潮时钟的时候就是要逆转角度的{:4_173:}

红影 发表于 2023-4-24 10:19

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

马黑黑 发表于 2023-4-24 11:55

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

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

马黑黑 发表于 2023-4-24 11:56

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

这是CSS transform转换的小技巧

马黑黑 发表于 2023-4-24 12:02

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

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

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

樵歌 发表于 2023-4-24 13:50

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

红影 发表于 2023-4-24 20:52

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

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

红影 发表于 2023-4-24 20:53

马黑黑 发表于 2023-4-24 11:56
这是CSS transform转换的小技巧
保证文字朝向是对的。

红影 发表于 2023-4-24 20:54

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

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

是的，我看错了{:4_173:}

马黑黑 发表于 2023-4-24 22:21

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

理论上，分母不可能是0

马黑黑 发表于 2023-4-24 22:22

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

嗯，是这个意思

马黑黑 发表于 2023-4-24 22:22

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

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

马黑黑 发表于 2023-4-24 22:32

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

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

樵歌 发表于 2023-4-25 07:33

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

圈圈里可以写字不{:4_203:}

查看完整版本: 正弦与余弦函数在JS中的应用举例