javascript與三角函數(shù)之二：圓周運(yùn)動(dòng)

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

摘要：角度與弧度我們現(xiàn)實(shí)生活中使用的大都是角度，比如度度，但在計(jì)算機(jī)中的語(yǔ)言中，使用的都是弧度。我們?cè)诔绦蛑校看渭拥亩际墙嵌?，所以需要轉(zhuǎn)化成弧度才能讓中三角函數(shù)中使用，代碼如下源碼及實(shí)現(xiàn)，請(qǐng)移步

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

sin、cos、tan概念

為了直觀，我們引入一個(gè)三角形

概念如下：

sinα = b / c

cosα = a / c

tanα = b / a

javascript中的表示方法

π ---> Math.PI

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

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

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

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

圓周運(yùn)動(dòng)分析

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

角度與弧度

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

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

var ang = 60

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

源碼及實(shí)現(xiàn)，請(qǐng)移步GitHub

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87306.html

相關(guān)文章

庫(kù)&插件&框架&工具

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

Codeing_ls 2019-08-01 18:22 評(píng)論0 收藏0
庫(kù)&插件&框架&工具

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

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

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

_ang 2019-08-21 14:19 評(píng)論0 收藏0
JavaScript算法之二叉搜索樹(shù)

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

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

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

Carl 2019-08-21 11:44 評(píng)論0 收藏0