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{
                 100px;
                height: 100px;
                background-color: black;
                position: absolute;
                
            }
            #div2 div{
                 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
 
原文地址:https://www.cnblogs.com/Huskie-/p/13209765.html