P: 圆形菜单--坐标的求解

高手慎入，此文纯粹给自己扫盲滴！

背景：

    慕课网“径向动画菜单”演示示例

    课程目的：以圆形的轨迹显示导航菜单

    效果如图：

    

   原理：

   

本来可以直接使用这个公式，js循环处理即可。但O又抽风了，自己手动画一个图，然后就不淡定了：（此图片纯属个人错误分析，请忘了他吧！） 

坐标求解方式不一致？为什么会想到这样低级的错误？

因为没有考虑到角的方向！

 

做完辅助线之后，不自觉地认为锐角∠BAP,就是所求的弧度。其实不然，因为平面的坐标系不一样：

    数学理论中默认右上为平面的正方向；而在浏览器中右下才是平面的正方向！

复习下数学知识：

（1）角的方向

[R: radiansfor the most common angles in the unit circle measured in thecounterclockwise direction ]

即从X轴正方向按照逆时针方向旋转到终边所经过的角度

示例：

 

（2）象限

[Wiki:These are often numbered from 1st to 4th anddenoted by Roman numerals: I (where thesigns of the two coordinates are (+,+)), II (−,+), III (−,−), and IV (+,−).]

 

[R: 象限是根据x轴和y轴来定的。两个正的是第一象限，x正y负是第二象限，两个都负是第三象限，y正x负是第四象限。 ]

 示例：

（3）三角函数的诱导公式

总结：

浏览器中平面的正方向，只是Y轴翻转了180° 而已，正好可以看做是地球的两极: 自转方向--北逆南顺。

而锐角∠BAP与旋转方向相反，是为负角。

所以： y = y0 – rsin(-θ) = y0 + rsinθ

修改下效果图，使结论更加明确：

参考资料：

http://www.imooc.com/video/7014

http://stackoverflow.com/questions/5300938/calculating-the-position-of-points-in-a-circle 

http://en.wikipedia.org/wiki/Radian  

http://en.wikipedia.org/wiki/Sine 

http://math.rice.edu/~pcmi/sphere/drg_txt.html 

http://designshack.net/articles/css/7-awesome-emmet-html-time-saving-tips/