javascript與三角函數之二：圓周運動

xzavier 發布于2019-08-21 11:59 / 2217人閱讀

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

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

sin、cos、tan概念

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

概念如下：

sinα = b / c

cosα = a / c

tanα = b / a

javascript中的表示方法

π ---> Math.PI

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

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

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

我們已經角度α和其中c邊的長度，我們如何求出a邊和b邊的長度呢？
聰明的你已經想到了：b = sinα * c，其他的邊依此類推。

圓周運動分析

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

角度與弧度

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

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

var ang = 60

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

源碼及實現，請移步GitHub

云服務器 GPU云服務器運動封裝函數 JavaScript緩沖運動系列之二 javascript 函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87306.html

庫&插件&框架&工具

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

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

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

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

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

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

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

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

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

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