JS画圆

js画圆

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                 50px;
                height: 50px;
                background-color: pink;
                position: absolute;
            }
            .sp span{
                 5px;
                height: 5px;
                background-color: pink;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function(){
                var oBox = document.querySelector(".box");
                var oSpan = document.querySelector("span");
                var r = 100;  //设置半径
                var x = 400 ;  //设置圆点
                var y = 400;
                var angle = 0;   //角度
                setInterval(function(){
                    angle ++;
                    var radian = angle * Math.PI /180;  //弧度
                    var a = Math.sin(radian) * r;   //圆上点的横纵坐标的值 
                    var b = Math.cos(radian) * r;
                    oBox.style.left = x + a + "px";   //运动轨迹
                    oBox.style.top = y-b+"px";  
                    var span = document.createElement("span");  //给运动轨迹添加底色
                    span.style.left = oBox.offsetLeft + "px";
                    span.style.top = oBox.offsetTop + "px";
                    oSpan.appendChild(span);
                },30)
            }
        </script>
    </head>
    <body>
        <div class="box"></div>
        <span class="sp"></span>
    </body>
    </html>
请用今天的努力，让明天没有遗憾。