JavaScript如何獲得兩點之間順時針旋轉的角度

接上回：如何用javascript中的canvas讓圖片自己旋轉

既然能夠制定角度讓圖片旋轉，那么現在要做的是自動獲得旋轉的角度，

讓圖片能夠隨着鼠標的方向旋轉，讓人物能夠面朝鼠標的方向；

 

源代碼：

   

function getAngle(px,py,mx,my){//獲得人物中心和鼠標坐標連線，與y軸正半軸之間的夾角
        var x = Math.abs(px-mx);
        var y = Math.abs(py-my);
        var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        var cos = y/z;
        var radina = Math.acos(cos);//用反三角函數求弧度
        var angle = Math.floor(180/(Math.PI/radina));//將弧度轉換成角度

        if(mx>px&&my>py){//鼠標在第四象限
            angle = 180 - angle;
        }

        if(mx==px&&my>py){//鼠標在y軸負方向上
            angle = 180;
        }

        if(mx>px&&my==py){//鼠標在x軸正方向上
            angle = 90;
        }

        if(mx<px&&my>py){//鼠標在第三象限
            angle = 180+angle;
        }

        if(mx<px&&my==py){//鼠標在x軸負方向
            angle = 270;
        }

        if(mx<px&&my<py){//鼠標在第二象限
            angle = 360 - angle;
        }



            return angle;
    }

 

思路：

   

                           （圖1）

 

如圖1所示,

我需要知道∠A的角度

其實只需要用三角函數就可以求得

其中比較困難點的是：求得三角函數值，將三角函數轉換成弧度，再講弧度轉換為角度：

        var cos = y/z;
        var radina = Math.acos(cos);//用反三角函數求弧度
        var angle = Math.floor(180/(Math.PI/radina));//將弧度轉換成角度

然而這還沒完，這里所求的都是鼠標在第一象限的角度，所以當鼠標在二、三、四象限以及x、y軸上上時要對角度進行調整：

    if(mx>px&&my>py){//鼠標在第四象限
            angle = 180 - angle;
        }

        if(mx==px&&my>py){//鼠標在y軸負方向上
            angle = 180;
        }

        if(mx>px&&my==py){//鼠標在x軸正方向上
            angle = 90;
        }

        if(mx<px&&my>py){//鼠標在第三象限
            angle = 180+angle;
        }

        if(mx<px&&my==py){//鼠標在x軸負方向
            angle = 270;
        }

        if(mx<px&&my<py){//鼠標在第二象限
            angle = 360 - angle;
        }

這樣就能獲得當前∠A的角度，讓人物能夠旋轉