javascript与三角函数之二：圆周运动

我们看下我们通过三角函数要做出来的效果

sin、cos、tan概念

为了直观，我们引入一个三角形

概念如下：

sinα = b / ccosα = a / ctanα = b / a

javascript中的表示方法


π ---> Math.PIsinα ---> Math.sin(α)cosα ---> Math.cos(α)tanα ---> Math.tan(α)

我们已经角度α和其中c边的长度，我们如何求出a边和b边的长度呢？
聪明的你已经想到了：b = sinα * c，其他的边依此类推。

圆周运动分析

圆周运动最终要找的还是那个灰三角形的left和top值，我们已经的条件有角度（随时间变大，初始为0）和c边（圆的半径），那根据上面的公式，a边和b边也就可以求得，那么，瞬时的left和top也就可以取得。

角度与弧度

我们现实生活中使用的大都是角度，比如：30度、60度，但在计算机中的语言中，使用的都是弧度。啥是弧度呢，我们先看个图

当α对着的扇形的周长和圆的半径相等时，那么α就等于1弧度。咋推导出来的呢，我们知道圆的周长为：2πr，一周为360度，所以2πr = 360，根据上面的定义，一个半径的长度为一弧度，所以1弧度 = 180 / π 度，反过来1度= π / 180 弧度。
我们在程序中，每次加的都是角度，所以需要转化成弧度才能让js中三角函数中使用，代码如下：

var ang = 60var a = Math.cos(ang * (Math.PI / 180)) * r

源码及实现，请移步GitHub

javascript与三角函数之二：圆周运动相关推荐

从头开始学JavaScript (五)——操作符（二）
原文:从头开始学JavaScript (五)--操作符(二) 一.乘性操作符 1.乘法:* 乘法操作符的一些特殊规则: 如果操作数都是数值,按照常规的乘法计算,如果乘积超过了ECMAscri ...
Android WebView 和 javaScript的互相调用(二)
原文出处:http://blog.csdn.net/wangtingshuai/article/details/8635787 WebView相关阅读 Android WebView 和 javaSc ...
JavaScript实现数乘以二multiplyByTwo算法（附完整源码）
JavaScript实现数乘以二multiplyByTwo算法(附完整源码) multiplyByTwo.js完整源代码 multiplyByTwo.js完整源代码 /*** @param {numb ...
JavaScript实现数除以二divideByTwo算法（附完整源码）
JavaScript实现数除以二divideByTwo算法(附完整源码) divideByTwo.js完整源代码 divideByTwo.js完整源代码 /*** @param {number} nu ...
Javascript基础回顾之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
JavaScript学习（九十二）—关联数组的基本操作
JavaScript学习(九十二)-关联数组的基本操作王同学的每天进步一点点系列!!! 一.关联数组的定义定义:所谓关联数组,就是指数组元素的下标为字符型二.关联数组的创建方式 1)定义一个空数 ...
JavaScript学习（十二）—removeAttribute方法、hasAttribute方法、createAttribute方法以及setAttributeNode方法
JavaScript学习(十二)-removeAttribute方法.hasAttribute方法.createAttribute方法以及setAttributeNode方法 (一).removeAt ...
JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4
JavaScript的事件系列二判断热键shift,ctrl,alt,win shiftkey 当shift按下时为true,默认为false var v = ev || window.event; ...
JavaScript 高级编程（二）
JavaScript 高级编程(二) BOM 一套操作浏览器的API. 常见对象 window: 代表整个浏览器窗口注意: window是BOM中的一个对象, 并且是一个顶级的对象(全局) Navi ...