Sin和Cos翻轉我怎麼處理這個？

Question

這只是我正在做的練習，我已經將setInterval函數中的sin和cos函數翻轉過來了，它的功能就像一個魅力一樣。我無法找到我如何設法翻轉它們。就我所能看到的，所有x和y都像他們應該那樣。

這只是一個鏈接到jsfiddle下面的代碼。 http://jsfiddle.net/Lf5sZ/5/

//Creating the cube. 
var el = document.createElement('div'); 
el.style.position = 'fixed'; 
el.style.width = '100px'; 
el.style.height = '100px'; 
el.style.background = '#000'; 

//Creating the cube target dot. 
var tp = document.createElement('div'); 
tp.style.position = 'fixed'; 
tp.style.margin = '45px 0 0 45px'; 
tp.style.width = '10px'; 
tp.style.height = '10px'; 
tp.style.borderRadius = '5px'; 
tp.style.background = '#f00'; 

//Current X position start with random cord within window width. 
var cPosX = Math.ceil(Math.random()*(window.innerWidth-100)); 
//Current Y position start with random cord within window height. 
var cPosY = Math.ceil(Math.random()*(window.innerHeight-100)); 

//Target is the same as the current position since we don't want to move anywhere. 
var tPosX = cPosX; 
var tPosY = cPosY; 

//The length of each move the update will take the cube to it's target. 
var step = 4; 

//The mouse position last known position. 
var mPosX = 0; 
var mPosY = 0; 

//Then mouse move update the last known position. 
document.onmousemove = function(e){ 
    mPosX = e.clientX; 
    mPosY = e.clientY; 
} 

//change the target if the mouse hits the cube. 
el.onmouseover = function(){ 
    //stores the distance between the mouse position and the closes edge. 
    dist=0; 

    //If the degrees are in specific range we know where the mouse pointer is. 
    if(Math.abs(mPosX-cPosX) < Math.abs(mPosX-(cPosX+100))){ 
     direction = 'l'; 
     dist = Math.abs(mPosX-cPosX); 
    }else{ 
     direction = 'r'; 
     dist = Math.abs(mPosX-(cPosX+100)); 
    } 
    if(Math.abs(mPosY-cPosY) < Math.abs(mPosY-(cPosY+100))){ 
     if(dist > Math.abs(mPosY-cPosY)){ 
      direction = 't'; 
     } 
    }else{ 
     if(dist > Math.abs(mPosY-(cPosY+100))){ 
      direction = 'b'; 
     } 
    } 

    //Based on the direction we know what direction not to go to. 
    switch(direction){ 
     case 'l': 
      deg = Math.ceil(Math.random()*180)-90; 
      break; 
     case 'r': 
      deg = Math.ceil(Math.random()*180)+90; 
      break; 
     case 't': 
      deg = Math.ceil(Math.random()*180)-180; 
      break; 
     case 'b': 
      deg = Math.ceil(Math.random()*180); 
      break; 
    } 

    //Turns the degrees into radians 
    rad = deg * Math.PI/180; 
    if(rad < 0){ 
     rad += 2*Math.PI; 
    } 

    //Need to get a random length here 

    //Update the target. 
    tPosX = Math.ceil(Math.random()*(window.innerWidth-100)); 
    tPosY = Math.ceil(Math.random()*(window.innerHeight-100)); 
} 

setInterval(function(){ 
    //if the mouse is in the current position get new target. 
    if((cPosX > mPosX > cPosX+100) && (cPosY > mPosY > cPosY+100)){ 
     el.onmouseover(); 
    } 

    //if current and target is not the same we are moving the cubes current location. 
    if((cPosX != tPosX) && (cPosY != tPosY)){ 
     //Get the distance between the current and target position 
     dist = (Math.round(Math.abs(Math.sqrt((tPosX-cPosX)^2 + (tPosY-cPosY)^2))*1000)/1000); 

     //If distance between target and current position is less then a step move to target directly. 
     if(dist < step ){ 
      cPosX = tPosX; 
      cPosY = tPosY; 
     }else{ 
      //the angle between target and current position. 
      rad = Math.atan2(tPosX-cPosX,tPosY-cPosY); 

      //Makes the angle positive. 
      if(rad < 0){ 
       rad += 2*Math.PI; 
      } 

      //Update the current position. 
      cPosX += step * Math.sin(rad); 
      cPosY += step * Math.cos(rad); 
     } 
    } 

    //Set the current and target cords to the cube and target dot. 
    el.style.left = cPosX + 'px'; 
    el.style.top = cPosY + 'px'; 
    tp.style.left = tPosX + 'px'; 
    tp.style.top = tPosY + 'px'; 
},1000/30); 

//Adds the cube and target dot to the document. 
document.body.appendChild(el); 
document.body.appendChild(tp); 

Answer 1

你atan2調用應該是atan2(dy, dx)，不dx, dy，所以你的角度是不正確的。

這是假設沿正x軸鋪設0度的笛卡爾約定，當然，頁面上的Y座標是倒置的，並且向下而不是向上運行。