javascript与三角函数之二：圆周运动

xzavier 发布于2019-08-21 11:59 / 2081人阅读

摘要：角度与弧度我们现实生活中使用的大都是角度，比如度度，但在计算机中的语言中，使用的都是弧度。我们在程序中，每次加的都是角度，所以需要转化成弧度才能让中三角函数中使用，代码如下源码及实现，请移步

我们看下我们通过三角函数要做出来的效果

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

混合云服务器托管运动封装函数 JavaScript缓冲运动系列之二 javascript 函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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