原生JS如何实现圆周运动

1、第一步：先来复习一下三角函数的知识，如图：

弧度和角度的换算:弧度=角度乘以π除以180

三角函数公式：

sinβ=a/c

cosβ=b/c

tanβ=a/b

2、第二步：新建一个html页面，在页面中做出一个圆点a，目的就是让这个圆点a做圆周运动，如图：

1、运动轨迹的设定如下：

设置圆周运动的半径为：r=100

设置圆周运动的圆心坐标位置为：X=500;Y=300;

设置圆点a在运动轨迹上的初识角度为：num=0；

2、获取圆点的运动轨迹

num++；（为了然圆点a运动起来）

a=Math.sin(num*Math.PI/180)*r;（具体公式在第一步）

b=Math.cos(num*Math.PI/180)*r;

oDiv.style.left=X+b+'px';

oDiv.style.top=Y+a+'px';//X、Y的值相当于圆心的坐标位置

然后把上面的代码放在一个定时器下面

setInterval(function(){

            num++;

            var a=Math.sin(num*Math.PI/180)*r;

            var b=Math.cos(num*Math.PI/180)*r;

            oDiv.style.left=X+b+'px';//X、Y的值相当于圆心的坐标位置

            oDiv.style.top=Y+a+'px';

 },30);

3、将圆点a的运动轨迹在页面中打印出来，查看圆周运动轨迹

创建一个div元素，并添加class为box，将圆点a的运动坐标赋值给div的坐标位置

var oBox=document.createElement('div');

oBox.className='box';

document.body.appendChild(oBox);

oBox.style.left=oDiv.offsetLeft+'px';

oBox.style.top=oDiv.offsetTop+'px';