Math.atan2求角度解析

简介: `Math.tan(x/y)` 求得是与y轴的夹角,而 `Math.atan2(y, x)` 求得是与x轴的夹角(范围:\(-\pi\) 到 \(\pi\)),顺时针为负,逆时针为正。`Math.atan2` 函数注意点:y在前,x在后。它能正确处理各象限的角度,例如 `Math.atan2(1, 1)` 返回 \(\frac{\pi}{4}\),而 `Math.atan2(-1, -1)` 返回 \(-\frac{3\pi}{4}\)。

我们求角度的时候,

第一反应应该是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
Math.atan2(y, x)

证明:

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

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

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

-3/4 * Math.PI // -2.356194490192345 第三象限

2. 接下来我们求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. 我参考的是百度百科

完结撒花!!!

目录
相关文章
|
JavaScript 前端开发 C#
Select 下拉框切换拦截的三种方案|【Proxy】
Select 下拉框切换拦截的三种方案|【Proxy】
2338 0
vue3——如何安装vuex
vue3——如何安装vuex
249 0
|
6月前
|
设计模式 人工智能 编解码
突破效率边界:VTJ.PRO以AI+低代码重塑企业数字化生产力
VTJ.PRO是新一代AI驱动的低代码平台,通过可视化开发架构提升企业应用构建效率。支持零编码设计、多模态渲染、响应式布局与智能AI辅助,助力企业加速数字化转型,显著缩短开发周期并降低维护成本。
191 0
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
Go API 数据库
【Go 语言专栏】Go 语言中的 ORM 框架使用与比较
【4月更文挑战第30天】本文对比分析了Go语言中的常见ORM框架:GORM、XORM和BeeORM。GORM功能强大,支持复杂查询和关联关系处理,但可能影响性能;XORM以其简单易用和高性能受到青睐,但文档不全;BeeORM简洁高效,适合基础应用场景。选择ORM应考虑功能、性能、易用性和社区支持,根据项目需求进行评估和选择,以提升开发效率和应用性能。
882 0
|
前端开发 JavaScript API
document.queryselector怎么用
document.queryselector怎么用
515 0
简述a标签超链接target属性的取值和作用
简述a标签超链接target属性的取值和作用
|
算法 定位技术 图形学
unity3d寻路算法
unity3d寻路算法
444 8