JS模拟圆周运动

最新推荐文章于 2021-05-20 11:08:44 发布

图图小淘气_real

最新推荐文章于 2021-05-20 11:08:44 发布

阅读量296

点赞数

分类专栏：前端 JAVA

本文链接：https://blog.csdn.net/qq_41995919/article/details/103231665

版权

前端同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

JAVA

70 篇文章 1 订阅

订阅专栏

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="https://code.jquery.com/jquery-3.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>

图图小淘气_real

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
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如何得到圆上每个点的坐标？解决思路：根据三角形的正玄、余弦来得值；假设一个...
复制链接

扫一扫