圆周运动

最新推荐文章于 2024-08-04 18:58:23 发布

原创最新推荐文章于 2024-08-04 18:58:23 发布 · 260 阅读

1 ·

CC 4.0 BY-SA版权

画圆的步骤：
1、确定圆心
2、确定半径
3、旋转（顺时针）

          1弧度 = Math.PI / 180

在这里插入图片描述

var oDiv = document.getElementById("div1");

            //圆心位置
            var X = 400;
            var Y = 400;

            //半径
            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;

                oDiv.style.left = X + a + "px";
                oDiv.style.top = Y - b + "px";


                //显示当前圆周运动的轨迹
                var node = document.createElement("div");
                node.style.width = "5px";
                node.style.height = "5px";
                node.style.backgroundColor = "black";
                node.style.position = "absolute";
                node.style.left = oDiv.offsetLeft + "px";
                node.style.top = oDiv.offsetTop + "px";
                document.body.appendChild(node);
            },30)