零JS筆記 | 三角函数
函數：每一個變量都有對應的值稱之為函數
Math.pow(a,b) 表示ab</sup
Math.sqrt(a)，表示a的開方，無法開多次方
a2+b2=c2
iMac底部菜單
See the Pen PPENEj by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
三角函数：Math.sin(弧度)、Math.cos(弧度)、Math.tan(弧度)，即三角函数括号里以弧度为单位；
360o == 2π弧度； 所以，1弧度 = 180/π角度，1角度 = π/180弧度，记忆：弧度 > 角度
角度转弧度： π/180 × 角度
弧度变角度： 180/π × 弧度
sin = a/c;cos = b/c; tan = a/b
圆的周长：l = 2π*r
弧长等于半径的弧，其所对的圆心角为1弧度，所以: 弧长=nπr/180，在这里n就是角度数，即圆心角n所对应的弧长
一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17'44.806''，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。
//角度转弧度，30度角转弧度，30*π/180
Math.sin(30 * Math.PI/180)
//上下比，角度对应π,弧度对应180圓周運動,右水平線開始運動；
window.onload = function(){
var oDiv = document.getElementById('div1');
var r = 100;
var x = 700;
var y = 300;
var num = 0;
setInterval(function(){
num++
//Math.sin( num*Math.PI/180 ) = a/r;
//Math.cos( num*Math.PI/180 ) = b/r;
var a = Math.sin( num*Math.PI/180 ) * r; //顺时针时，距离中心点的top值越来越远
var b = Math.cos( num*Math.PI/180 ) * r; //顺时针时，距离中心点的left值越来越近；
oDiv.style.left = x + b + 'px';
oDiv.style.top = y + a + 'px';
var oBox = document.createElement('div');
oBox.className = 'box';
document.body.appendChild( oBox );
oBox.style.left = oDiv.offsetLeft + 'px';
oBox.style.top = oDiv.offsetTop + 'px';
},300);
};#div1{ width:20px; height:20px; background:red; position:absolute; left:800px; top:300px;}
.box{ border:1px #000 solid; position:absolute;}围绕y轴，在x轴平面上做运动，并且有z轴半径r;所以top值不变，改变的是left值与宽高，形成视觉差，近大远小运动
window.onload = function(){
var oDiv = document.getElementById('div1');
var r = 100;
var x = 700;
var y = 300;
var num = 0;
setInterval(function(){
num++
//Math.sin( num*Math.PI/180 ) = a/r;
//Math.cos( num*Math.PI/180 ) = b/r;
//围绕y轴，在x轴平面上做运动，并且有z轴半径r;所以top值不变，改变的是left值与宽高，形成视觉差，近大远小运动
var a = Math.sin( num*Math.PI/180 ) * r;
var b = Math.cos( num*Math.PI/180 ) * r;
oDiv.style.left = x + b + 'px';
//oDiv.style.top = y + a + 'px';
oDiv.style.width = a/100*30 + 50 + 'px'; //a最大100,起点50,注意理解
oDiv.style.height = a/100*30 + 50 + 'px';
},8);
};圆心随鼠标移动方向移动；
var box = document.querySelector('.box')
var ege = document.querySelector('.ege')
var r = 50;
var L = 400
var T = 400
/* -
* \
\
- ------------ +
\
\
* +
* */
document.onmousemove = function (e) {
var e = e || event;
var x = e.clientX;
var y = e.clientY;
var a = Math.abs(x - (L + ege.parentNode.offsetLeft)) //为算角度
var b = Math.abs(y - (T + ege.parentNode.offsetTop)) //大角与小角 角度一样
var changeX = 0;
var changeY = 0;
if (x > L + ege.parentNode.offsetLeft && y < T + ege.parentNode.offsetTop) {
changeX = Math.sin(Math.atan(b / a)) * r
changeY = Math.cos(Math.atan(b / a)) * - r
}
else if (x > L + ege.parentNode.offsetLeft && y > T + ege.parentNode.offsetTop) {
changeX = Math.sin(Math.atan(b / a)) * r
changeY = Math.cos(Math.atan(b / a)) * r
}
else if (x < L + ege.parentNode.offsetLeft && y > T + ege.parentNode.offsetTop) {
changeX = Math.sin(Math.atan(b / a)) * - r
changeY = Math.cos(Math.atan(b / a)) * r
}
else if (x < L + ege.parentNode.offsetLeft && y < T + ege.parentNode.offsetTop) {
changeX = Math.sin(Math.atan(b / a)) * - r
changeY = Math.cos(Math.atan(b / a)) * - r
}
ege.style.left = changeX + 'px'
ege.style.top = changeY + 'px'
}
使用Math.atan2(y,x)，以原点为基础，任意一点到原点x轴的夹角；值范围为-PI - PI,换角度即：-180 - 180
一图了然，所以改写为
var ev = ev || window.event;
change(oDiv2, ev.clientX, ev.clientY, L2, T2);
change(oDiv3, ev.clientX, ev.clientY, L3, T3);
function change(obj, x, y, l, t) {
var changeX = 0;
var changeY = 0;
var a = x - (obj.offsetLeft + obj.parentNode.offsetLeft) //方向 右+ 左- 上 + 下-
var b = - (y - (obj.offsetTop + obj.parentNode.offsetTop))
var ifm = Math.atan2(b, a) * 180 / Math.PI
if (0 < ifm < 90) {
changeX = Math.sin(Math.atan2(b, a)) * r
changeY = Math.cos(Math.atan2(b, a)) * r
}
else if (90 < ifm < 180) {
changeX = Math.sin(Math.atan2(b, - a)) * r
changeY = Math.cos(Math.atan2(b, - a)) * r
}
else if (0 > ifm > - 90) {
changeX = Math.sin(Math.atan2( - b, a)) * r
changeY = Math.cos(Math.atan2( - b, a)) * r
}
else if ( - 90 > ifm > - 180) {
changeX = Math.sin(Math.atan2( - b, - a)) * r
changeY = Math.cos(Math.atan2( - b, - a)) * r
}
obj.style.left = l + changeX + 'px';
obj.style.top = t + changeY + 'px';
}反正弦，反余弦 Math.asin(x); Math.acos(x) 求度数函数
正常sin30度=1/2 arcsin2/1=30度
cos60度=1/2 arccos1/2=30度
<style>
table{border-collapse: collapse;width:95%}
table td{border:1px solid #ddd;padding:5px 10px}
table th{border:1px solid #ddd;padding:5px 10px}</style>
Math 对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。 |
| LN2 | 返回 2 的自然对数（约等于0.693）。 |
| LN10 | 返回 10 的自然对数（约等于2.302）。 |
| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.414）。 |
| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。 |
| PI | 返回圆周率（约等于3.14159）。 |
| SQRT1_2 | 返回返回 2 的平方根的倒数（约等于 0.707）。 |
| SQRT2 | 返回 2 的平方根（约等于 1.414）。 |
Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回数的绝对值。 |
| acos(x) | 返回数的反余弦值。 |
| asin(x) | 返回数的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 e 的指数。 |
| floor(x) | 对数进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y) | 返回 x 和 y 中的最高值。 |
| min(x,y) | 返回 x 和 y 中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 把数四舍五入为最接近的整数。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| toSource() | 返回该对象的源代码。 |
| valueOf() | 返回 Math 对象的原始值。 |