零JS筆記 | 三角函数

函數：每一個變量都有對應的值稱之為函數

Math.pow(a,b) 表示a^b</sup

Math.sqrt(a)，表示a的開方，無法開多次方

a²+b²=c²

iMac底部菜單

See the Pen PPENEj by elmok (@elmok) on CodePen.

//角度转弧度，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';
}

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 对象属性

Math 对象方法