javascript與三角函數(shù)之二：圓周運動

xzavier 發(fā)布于2019-08-21 11:59 / 2281人閱讀

摘要：角度與弧度我們現(xiàn)實生活中使用的大都是角度，比如度度，但在計算機中的語言中，使用的都是弧度。我們在程序中，每次加的都是角度，所以需要轉(zhuǎn)化成弧度才能讓中三角函數(shù)中使用，代碼如下源碼及實現(xiàn)，請移步

我們看下我們通過三角函數(shù)要做出來的效果

sin、cos、tan概念

為了直觀，我們引入一個三角形

概念如下：

sinα = b / c

cosα = a / c

tanα = b / a

javascript中的表示方法

π ---> Math.PI

sinα ---> Math.sin(α)

cosα ---> Math.cos(α)

tanα ---> Math.tan(α)

我們已經(jīng)角度α和其中c邊的長度，我們?nèi)绾吻蟪鯽邊和b邊的長度呢？
聰明的你已經(jīng)想到了：b = sinα * c，其他的邊依此類推。

圓周運動分析

圓周運動最終要找的還是那個灰三角形的left和top值，我們已經(jīng)的條件有角度（隨時間變大，初始為0）和c邊（圓的半徑），那根據(jù)上面的公式，a邊和b邊也就可以求得，那么，瞬時的left和top也就可以取得。

角度與弧度

我們現(xiàn)實生活中使用的大都是角度，比如：30度、60度，但在計算機中的語言中，使用的都是弧度。啥是弧度呢，我們先看個圖

當α對著的扇形的周長和圓的半徑相等時，那么α就等于1弧度。咋推導(dǎo)出來的呢，我們知道圓的周長為：2πr，一周為360度，所以2πr = 360，根據(jù)上面的定義，一個半徑的長度為一弧度，所以1弧度 = 180 / π 度，反過來1度= π / 180 弧度。
我們在程序中，每次加的都是角度，所以需要轉(zhuǎn)化成弧度才能讓js中三角函數(shù)中使用，代碼如下：

var ang = 60

var a = Math.cos(ang * (Math.PI / 180)) * r

源碼及實現(xiàn)，請移步GitHub

GPU云服務(wù)器云服務(wù)器運動封裝函數(shù) JavaScript緩沖運動系列之二 javascript 函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87306.html

相關(guān)文章

庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對接、一起完...

Codeing_ls 2019-08-01 18:22 評論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對接、一起完...

xiaowugui666 2019-08-21 18:43 評論0 收藏0
【面試系列】之二：關(guān)于js原型

摘要：之二關(guān)于原型開篇我記得初學(xué)時，最難懂的概念就是的原型，而且這個概念在筆試面試中常常提到，因此今天我們把這個概念拿出來，好好聊一聊。之二：關(guān)于js原型 1. 開篇我記得初學(xué)js時，最難懂的概念就是js的原型，而且這個概念在筆試面試中常常提到，因此今天我們把這個概念拿出來，好好聊一聊。在仔細講解之前，我們先來看一道題，這道題來自JavaScript高級程序設(shè)計中原型鏈那一節(jié)： fun...

_ang 2019-08-21 14:19 評論0 收藏0
JavaScript算法之二叉搜索樹

摘要：二叉搜索樹的特性二叉搜索樹由于其獨特的數(shù)據(jù)結(jié)構(gòu)，使得其無論在增刪，還是查找，時間復(fù)雜度都是，為二叉樹的高度。二叉搜索樹的查找查找很簡單，根據(jù)左子節(jié)點比該節(jié)點小，右子節(jié)點比該節(jié)點大的原則進行循環(huán)判斷即可。什么是二叉樹二叉樹就是樹的每個節(jié)點最多只能有兩個子節(jié)點什么是二叉搜索樹二叉搜索樹在二叉樹的基礎(chǔ)上，多了一個條件，就是二叉樹在插入值時，若插入值比當前節(jié)點小，就插入到左節(jié)點，否則插...

khlbat 2019-08-21 16:26 評論0 收藏0
React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之二：分離界面設(shè)計）

摘要：本篇講解轉(zhuǎn)義標簽投影定義，這幾項與如何分離界面設(shè)計有關(guān)。找一個替代品如上一篇非正經(jīng)入門之一所述，要克服漿糊的不利影響，要找一個替代品。本文完本專欄歷史文章介紹一項讓可以與抗衡的技術(shù)可視化開發(fā)工具非正經(jīng)入門之一三宗罪本系列博文從 Shadow Widget 作者的視角，解釋該框架的設(shè)計要點。本篇講解轉(zhuǎn)義標簽、json-x、投影定義，這幾項與如何分離界面設(shè)計有關(guān)。 ? 1. 找一個 ...

Carl 2019-08-21 11:44 評論0 收藏0