圆周运动"/>
JS模拟圆周运动
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;
Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;
这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度;
30° 角度 的弧度 = 2*PI/360*30
如何得到圆上每个点的坐标?
解决思路:根据三角形的正玄、余弦来得值;
假设一个圆的圆心坐标是(a,b),半径为r,
则圆上每个点的
X坐标=a + Math.sin(2*Math.PI / 360) * r ;
Y坐标=b + Math.cos(2*Math.PI / 360) * r ;注意在代码里是减号 -
如何求时钟的秒针转动一圈的轨迹?
假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。
解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;
for(var times=0; times<60; times++) {var hudu = (2*Math.PI / 360) * 6 * times;var X = a + Math.sin(hudu) * r;var Y = b - Math.cos(hudu) * r // 注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
}
参考:Math.PI和Math.sin() 与 Math.cos()搭配使用详解
案例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.main {width: 800px;height: 800px;background-color: black;position: relative;margin: auto;}.fix {width: 20px;height: 20px;background-color: red;border-radius: 50%;position: absolute;left: 390px;top: 270px;/*390 - 120:圆的12点方向*/}.show{width: 20px;height: 20px;background-color: lightseagreen;border-radius: 50%;position: absolute;left: 390px;top: 390px;}</style><script src=".1.1.min.js"></script></head><body><div class="main"><div class="fix"></div><div class="show"></div></div></body><script type="text/javascript">$(function() {/*如何求时钟的秒针转动一圈的轨迹?假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;*/ var times = 0;var r = 120;// 圆形半径setInterval(function(){times ++ ;if(times > 60){times = 0;}var hudu = (2 * Math.PI / 360) * 6 * times;var X = 390 + Math.sin(hudu) * r;var Y = 390 - Math.cos(hudu) * r // 注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。$(".fix").animate({left: X + "px",top: Y + "px"});},1000);})</script></html>
更多推荐
JS模拟圆周运动
发布评论