圆周运动（Math.PI）、Math.cos(x)、Math.sin(x)

知识点：

Math.cos(x): cos() 方法可返回一个数字的余弦值。返回的是 -1.0 到 1.0 之间的数。
Math.sin(x): sin() 方法可返回一个数字的正弦值。返回的是 -1.0 到 1.0 之间的数。
两个函数中的X 都是指的“弧度”而非“角度” 。弧度的计算公式为： 角度 *（PI/180）

let h = deg * Math.PI / 180;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆周运动</title>
    <style>
        .big {
     
     
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 2px solid rgb(184, 135, 32);
            margin: 100px auto;
            position: relative;
        }

        .small {
     
     
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
    <script>
        let big = document.querySelector('.big');
        let small = document.querySelector('.small');

        // 确定小圆的位置 left与top
        // sin = 对边/斜边  cos = 邻边/斜边
        let r = big.offsetWidth / 2; //半径
        //给一个初始角度 
        //两个函数中的X 都是指的“弧度”而非“角度” 　　弧度的计算公式为： 角度*（PI/180)　
        let deg = 30;
        setInterval(() => {
     
     
            deg++;
            let h = deg * Math.PI / 180;
            let lef = r - r * Math.cos(h)-small.offsetWidth/2;
            let top = r - r * Math.sin(h)-small.offsetWidth/2;
            small.style.left = lef + 'px';
            small.style.top = top + 'px';
        }, 10)
    </script>
</body>

</html>

在这里插入图片描述

圆周运动（Math.PI）、Math.cos(x)、Math.sin(x)

猜你喜欢