【小编推荐】得到圆上每个点的坐标 Math.sin/Math.cos的用法(jq圆形运动)

2016-03-03   |   发布者:梁国芳   |   查看:3320次

前端开发

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)而言的。

}

以下是我做的一个小案例:(仅供参考)

                            var r = 120;   //圆形半径
   var hudu = (2*Math.PI / 360) *(-45);   //  360/8=45,即45度(这个随个人设置)
   var X = 95 + Math.sin(hudu) * r;    //  95 是圆形中心的坐标X   即定位left 的值
   var Y = 95 - Math.cos(hudu) * r;    //  95 是圆形中心的坐标Y   即定位top 的值
$('.fix').css({
left:X+"px",
top:Y+"px",
})     //.fix在圆上的位置