JavaScript画圆

用圆规画圆是分为以下三步

　　　　　　1. 确定圆心

　　　　　　 2. 确定半径

　　　　　　 3. 顺时针

用代码画圆：

<!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>
            #div1{
                width: 100px;
                height: 100px;
                background-color: black;
                position: absolute;
                
            }
            #div2 div{
                width: 5px;
                height: 5px;
                background-color: black;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function(){
                var node = document.getElementById("div1");
                var node2 = document.getElementById("div2");

                //1、确定圆心
                var X = 500;
                var Y = 500;
                var r = 200;

                var i = 0; //转过的角度

                setInterval(function(){
                    i++;
                    var radian = i * Math.PI / 180;

                    //计算当前物体应该在什么位置

                    var a = Math.sin(radian) * r;
                    var b = Math.cos(radian) * r;

                    node.style.left = X + a + 'px';
                    node.style.top = Y - b + 'px';


                     //不停创建div放在页面上去显示轨迹
                    var newNode = document.createElement("div");
                    newNode.style.left = node.offsetLeft + 'px';
                    newNode.style.top = node.offsetTop + 'px';
                    node2.appendChild(newNode);
                }, 30);
            }

        </script>
    </head>
    <body>
        <div id = 'div1'></div>
        <div id = 'div2'></div>
    </body>
</html>

　　1弧度 = Math.PI / 180

posted on 2020-06-29 19:07 Huskie! 阅读(1064) 评论(0) 编辑收藏举报