javascript與三角函式之三 眼睛跟隨效果

2021-09-16 12:37:10 字數 1424 閱讀 4303

我們先看下最後的效果

實現思路

部分實現

計算offsetx和offsety

// 旋轉軌道的left和top值，也就是圖中offsetx和offsety


var wleft = $('.wrap').offset().left


var wtop = $('.wrap').offset().top


// 旋轉軌道的半徑


var r = 12
計算a邊和b邊的長度

// b邊的長度


var diffx = ev.pagex - (wleft + r)


// a邊的長度


var diffy = ev.pagey - (wtop + r)
計算α

// 弧度α


var deg = math.atan(math.abs(diffy) / math.abs(diffx))
計算內三角形的對邊和鄰邊

// 內三角形的鄰邊


var x = math.cos(deg) * r


// 內三角形的對邊


var y = math.sin(deg) * r
計算出眼睛的left值和top值

var left = (r + x) + 'px'


var top = (r + y) + 'px'
四象限角度問題

上面我們獲取了left值和top值，但是這只限於0~90度，也就是第四象限是可以了，關於四象限，我們上一張圖

當滑鼠落在第三象限的時候，計算出來的角度應該是90~180度，我們得出：

deg = math.pi - deg
當滑鼠落在第二象限的時候，計算出來的角度應該是180~270度，我們得出：

deg = math.pi + deg
當滑鼠落在第一象限的時候，計算出來的角度應該是270~360度，我們得出：

deg = 2 * math.pi - deg
要檢視最終效果以及具體實現，請用力點

常見三角函式與反三角函式

16341019 資料科學與計算機學院 toc 三角函式公式 反三角函式公式 簡單函式影象 1三角函式公式 兩角和公式 sin a b sinacosb cosasinb sin a b sinacosb cosasinb cos a b cosacosb sinasinb cos a b cosa...

常見三角函式與反三角函式

16341019 資料科學與計算機學院 toc 三角函式公式 反三角函式公式 簡單函式影象 1三角函式公式 兩角和公式 sin a b sinacosb cosasinb sin a b sinacosb cosasinb cos a b cosacosb sinasinb cos a b cosa...

三角函式與反三角函式的使用

假設該三角形是直角三角形。那麼 依照數學基礎是 sin b b c 其中b是邊b對應的角 但是在c c 程式上面稍微有點不同 那就是弧度制與角度制的區分 先說三角函式，在 程式設計裡面 舉sin 為例 sin 弧度制 只有裡面放弧度制，才能算的精準，假設要算45 的sin值 那麼對45 進行轉換為弧...