我们求角度的时候,

第一反应应该是Math.tan(x/y)就得到角度了



但是这样求的是和y轴的夹角,如果以y轴正方向为0度,顺时针为正,则第三象限和第一象限的tan值一致,需要判断x,y和0的关系,从而判定该角度是多少


也看到过Math.atan2(y, x)这个函数,

其实这个函数是这样的:

它求的是和x轴正方向的夹角,x轴正方向为0,顺时针为负值,逆时针为正值,顺逆时针(判定为优弧所在范围), 取值范围(-PI, PI]

描述

/**
* 求角度,弧度制
* @param {Number} y y值
* @param {Number} x x值
* @returns 和x轴正方向所成夹角,x轴上方为正,下方为负
**/
Math.atan2(y, x)

注意:这个函数第一个参数为y, 第二个参数为x

证明:

  1. 先记住几个数:¼PI、¾PI、-¼PI、-¾PI
1/4 * Math.PI // 0.7853981633974483 第一象限

3/4 * Math.PI // 2.356194490192345 第四象限

-1/4 * Math.PI // -0.7853981633974483 第二象限

-3/4 * Math.PI // -2.356194490192345 第三象限
  1. 接下来我们求x、y为±1的时候的值
Math.atan2(1, 1) // 0.7853981633974483 四分之一PI 的值

Math.atan2(-1, 1) // -0.7853981633974483 负四分之一PI 的值

Math.atan2(-1, -1) // -2.356194490192345 负四分之三PI 的值

Math.atan2(1, -1) // 2.356194490192345 四分之PI 的值

Math.atan2(0, -1) // 3.141592653589793 x轴负方向 值为 PI

Math.atan2(Math.sqrt(3), 1) // 1.0471975511965976 y为根号三,x为1,这是与x轴正方向60°的角

Math.atan2(Math.sqrt(3), -1) // 2.0943951023931957 y为根号三,x为-1, 这是与x轴正方向120°的角

atan 和 atan2 的区别

  1. 我参考的是百度百科

完结撒花!!!

Math.atan2求角度解析的更多相关文章

  1. JS如何使用Math.atan2获取两点之间角度的实践案例

    本文主要介绍使用如何实现手动拖拽旋转元素的效果. 1.简述 最近在研究如何实现手动控制元素的旋转效果,在网上找了很多,都没有找出类似的实现,因此经过一些调研和计算,最终完美实现效果,在这里记录下来. ...

  2. 数学API Math.atan() 和Math.atan2() 三角函数复习

    今天在学习贝塞尔曲线看到需要结合三角函数 以及两个不认识的Api :API Math.atan() 和Math.atan2() 先看下三角函数 正切函数图:(180为一个周期 即45=45+180) ...

  3. 转:Math: Math.atan() 与 Math.atan2() 计算两点间连线的夹角

    我们可以使用正切操作将角度转变为斜率,那么怎样利用斜率来转换为角度呢?可以利用斜率的反正切函数将他转换为相应的角度.as中有两个函数可以计算反正切,我们来看一下. 1.Math.atan() Math ...

  4. js math atan2

    在双十二活动中,视觉要求实现一个鼠标跟随运动的的效果,就像“觉”的那个效果类似 其实原理很简单,看鼠标从哪个方向进的及从哪个方向出的,然后区块里绝对定位的浮层就可以根据鼠标方向 运动; 如:在鼠标进入 ...

  5. Math.Atan2 方法

    返回正切值为两个指定数字的商的角度. public static double Atan2 ( double y, double x ) 参数 y 点的 y 坐标. x 点的 x 坐标. 返回值 角  ...

  6. 【转】Math.Atan2 方法

    原文网址:https://msdn.microsoft.com/zh-cn/library/system.math.atan2.aspx 返回正切值为两个指定数字的商的角度. 命名空间:  Syste ...

  7. Ceres 自动求导解析-从原理到实践

    Ceres 自动求导解析-从原理到实践 目录 Ceres 自动求导解析-从原理到实践 1.0 前言 2.0 Ceres求导简介 3.0 Ceres 自动求导原理 3.1 官方解释 3.2 自我理解 4 ...

  8. Processing平台之PVector求角度

    问题:在processing 平台,通过给定三个PVector向量,如何求他们之间的夹角,同时确定是在左侧还是右侧? 如图所示,在processing 平台中,PVector表示点的坐标是以原点为起点 ...

  9. 从源码的角度解析View的事件分发

    有好多朋友问过我各种问题,比如:onTouch和onTouchEvent有什么区别,又该如何使用?为什么给ListView引入了一个滑动菜单的功能,ListView就不能滚动了?为什么图片轮播器里的图 ...

  10. HDU 2080 夹角有多大II (数学) atan(y/x)分类求角度

    夹角有多大II Problem Description 这次xhd面临的问题是这样的:在一个平面内有两个点,求两个点分别和原点的连线的夹角的大小.注:夹角的范围[0,180],两个点不会在圆心出现. ...

随机推荐

  1. OS之《机械硬盘》

    数据的组织 一个磁盘设备 ---->多个物理盘片 一个物理盘片---->正反两面存储面 一个存储面---->多个磁道(每个磁道上存储容量时一样的,可存储相同数目的二进制位),所以,内 ...

  2. opencv imshow 大图片显示,拖动显示

    用imshow显示大图片,不能完整显示,不方便.结合网友的代码,修改成现在的代码,可以拖动图片,方便查看完整图片.而且方便调试,只需要用MatShow替换imshow. struct MousePar ...

  3. 利用Catalina快速重新指定tomcat的代码路径

    思路: 在/tomcat/conf/Catalina/localhost目录下,建立对应的xml文件,来定义. 方法: 比如:想在 Http://localhost/test-api 显示,且代码放在 ...

  4. openEuler欧拉安装Docker

    ​1. dnf配置 # 更新镜像源缓存 dnf makecache # 修改chrony时间同步配置 sed -i 's/pool pool.ntp.org iburst/pool ntp.aliyu ...

  5. 【C#】【Cookie】Cookie设置与读取

    依赖 using System.Web; 设置Cookie 1.新建Cookie对象 HttpCookie cookie = new HttpCookie("UserInfo"); ...

  6. Qt安卓开发经验001-010

    pro中引入安卓拓展模块 QT += androidextras . pro中指定安卓打包目录 ANDROID_PACKAGE_SOURCE_DIR = $$PWD/android 指定引入安卓特定目 ...

  7. 主打一个“小巧灵动”:Vite + Svelte

    作者:来自 vivo 互联网大前端团队-  Wei Xing 在研发小型项目时,传统的 Vue.React 显得太"笨重".本文主要针对开发小型项目的场景,谈谈 Vite+Svel ...

  8. JVM实战—3.JVM垃圾回收的算法和全流程

    大纲 1.JVM内存中的对象何时会被垃圾回收 2.JVM中的垃圾回收算法及各算法的优劣 3.新生代和老年代的垃圾回收算法 4.避免本应进入S区的对象直接升入老年代 5.Stop the World问题 ...

  9. C# .Net FrameWork3.5中异步HTTP请求时,由于安全协议的问题System.Net.HttpWebRequest.EndGetResponse(IAsyncResult asyncResult)方法抛出“基础连接已经关闭: 发送时发生错误”的解决办法

    现象描述: C# .Net FrameWork3.5中异步HTTP请求时,由于安全协议的问题System.Net.HttpWebRequest.EndGetResponse(IAsyncResult ...

  10. Docker开发实践:在windows 7中使用Docker for windows访问GUI

    1 安装Docker for windows 1.1下载Docker for windows 从下面的网址中下载Docker for windows并安装. https://www.docker.co ...