JavaScript使用atan2来绘制箭头和曲线的实例

最近搞Canvas绘图，知道了JavaScript中提供了atan2(y,x)这样一个三角函数。乍眼一看，不认识，毕竟在高中时，学过的三角函数有：sin,cos,arcsin,arccos,tan,arctan等，并没有这个。而工作中又需要用到它，所以这里就做了个简单的了解。

在坐标系中理解tan 和 atan

回顾一下三角函数tan：

tanθ，用三角函数来表示时，它的值等于sinθ/cosθ，如果将其放到坐标系中，它的的值等价于：dy/dx。在坐标系中，任意两个点所组成的直线，相对于x轴的斜率就是tanθ = dy /dx，相对于y轴的斜率就是dx/dy ，此时我们用cot来表示；其中，dy 是两个点的y坐标的差值，dx是两个点的x坐标的差值。

那么坐标系内除了y轴，任何一个点(x,y)，相对于x轴的斜率就是y-0/x-0，也即是y/x。

我们将tanθ称为一条直线相对于x轴的斜率，那么θ就是相对于x轴的夹角（旋转角度）了。

tan，是根据角度计算斜率的。那么反过来 arctan（反正切）自然就认为是根据斜率来计算角度的。

为何存在atan2 ?

在JavaScript中，提供了两个arctan函数，一个是atan, 一个是atan2。 atan就是我们所熟知arctan。其实在很多编程语言中都提供了atan2。

那么atan2又是怎么回事呢？

要知道这个，需要知道arctan的不足之处：

arctan的返回值范围是(-π/2, π/2) 不包括， ±π/2，也就是(两个点组成的直线与x轴夹角是90°)90°是计算不出来的。为啥呢?在计算arctan ( dy/dx)时，如果两个点(x1,y1),(x2,y2)组成的直线与x轴的夹角呈90°时，dx= x2-x1 = 0 ，0 是不能作为除数的，所以就无法计算这种情形。

值的范围也就是计算的角度的范围在（-π/2, π/2），从坐标系来看，这个角度的范围只能是在第1、4象限，并不能表示出第2、3象限的角。

为了弥补atan的不足，在计算机编程领域，引入了atan2函数，它的计算结果是在(-π,π]。它正好可以覆盖整个坐标系，包括90°的情形。

它的计算过程是怎样的呢？

关于这个，我从wikipedia上摘取了它的计算过程：

atan2的应用

在第一小节中的那张图中的坐标系，是我们熟知的。在HTML、Canvas中，坐标系并不像我们熟知的坐标系那样。它是这样的：

从x轴正向沿顺时针方向，所经过的角度分别是0，π/2, π，3π/2，2π。

从x轴正向沿逆时针方向，所经过的角度分别是0，-π/2, -π，-3π/2，-2π。

atan2的结果在(-π，π]之间，恰好一周，四个象限全覆盖。从坐标系来看，顺时针方向的值是正值，逆时针方向的值是负的。

从坐标系上来看，atan2结果是（0,-π）时就表示，从x轴正向逆时针方向转最大 π弧度（180角度）。同理，(0,π)表示从x轴正向顺时针转最大π弧度（180角度）。

在第1）小节中说了atan可以用来计算平面坐标系内任意两点的连线与x轴正向之间的夹角。而atan2是atan的补充，那么使用atan2自然就可以来计算平面坐标系内任意两点的连线与x轴正向之间的夹角了。

如果两个点在第一象限内：

如果两个点在第四象限内：

如果两个点在不同的象限内，我们也可以平移来看。

何时需要使用atan2 ?

目前我遇到了两种情况，是通过atan2来解决的：

1） 在平面坐标系内任意两个点间画一条带有箭头的直线（可以是单向箭头，可以是双向箭头）。在这个需求中，另外也知道了箭头的一条边与直线的夹角和箭头的长度。

这个需求的难点就是要计算出箭头的另外两个点坐标。

2） 在平面坐标系内任意两个点之间画一条指定曲率的曲线（arc）。在这个需求中，要计算arc，自然要知道radius, startAngle, endAngle，圆心坐标。可以根据曲率来计算出半径等，但是难点在计算圆心坐标。

这两个需求的共同特点是：

1）两个已知的点

2）根据这两个点和其他的条件去计算一些必须的（画line,arc等必须的）点坐标。

目前我遇到了这两种需求，都通过atan2来解决的。其他的情况，目前尚且未知，待后续发现时，补充上。

以上这篇JavaScript使用atan2来绘制箭头和曲线的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中的Math.atan2()方法使用详解

    这个方法返回其参数商数的反正切.该ATAN2方法返回-pi和PI 较(x,y)点的角度theta之间的数值. 语法 Math.atan2( x, y ) ; 下面是参数的详细信息: x 和 y : 一个数字. 返回值: 返回一个数弧度的反正切值 Math.atan2( ±0, -0 ) returns ±PI. Math.atan2( ±0, +0 ) returns ±0. Math.atan2( ±0, -x ) returns ±PI for x < 0. Math.atan2( ±0,

  • JavaScript使用atan2来绘制箭头和曲线的实例

    JavaScript使用atan2来绘制箭头和曲线的实例

    最近搞Canvas绘图,知道了JavaScript中提供了atan2(y,x)这样一个三角函数.乍眼一看,不认识,毕竟在高中时,学过的三角函数有:sin,cos,arcsin,arccos,tan,arctan等,并没有这个.而工作中又需要用到它,所以这里就做了个简单的了解. 在坐标系中理解tan 和 atan 回顾一下三角函数tan: tanθ,用三角函数来表示时,它的值等于sinθ/cosθ,如果将其放到坐标系中,它的的值等价于:dy/dx.在坐标系中,任意两个点所组成的直线,相对于x轴的斜

  • TensorFlow绘制loss/accuracy曲线的实例

    1. 多曲线 1.1 使用pyplot方式 import numpy as np import matplotlib.pyplot as plt x = np.arange(1, 11, 1) plt.plot(x, x * 2, label="First") plt.plot(x, x * 3, label="Second") plt.plot(x, x * 4, label="Third") plt.legend(loc=0, ncol=1)

  • python一绘制元二次方程曲线的实例分析

    说明 1.Matplotlib函数可以绘制图形,使用plot函数绘制曲线. 2.需要将200个点的x坐标和Y坐标分别以序列的形式输入plot函数,然后调用show函数来显示图形. 实例 import matplotlib.pyplot as plt #200个点的x坐标 x=range(-100,100) #生成y点的坐标 y=[i**2 for i in x ] #绘制一元二次曲线 plt.plot(x,y) #调用savefig将一元二次曲线保存为result.jpg plt.savefig

  • 详解如何利用Python绘制科赫曲线

    详解如何利用Python绘制科赫曲线

    目录 1. 递归 1.1 定义 1.2 数学归纳法 2. 递归的使用方法 2.1 阶乘 2.2 字符串反转 3. 科赫曲线的绘制 3.1 概要 3.2 绘制科赫曲线 3.3 科赫曲线的雪花效果 3.4 分形几何 1. 递归 1.1 定义 函数作为一种代码封装, 可以被其他程序调用,当然,也可以被函数内部代码调用.这种函数定义中调用函数自身的方式称为递归.就像一个人站在装满镜子的房间中,看到的影像就是递归的结果.递归在数学和计算机应用上非常强大,能够非常简洁地解决重要问题. 数学上有个经典的递归例

  • Javascript中 带名 匿名 箭头函数的重要区别(推荐)

    带名函数是指函数显示地给出了一个名字的函数,function abs(x){}.匿名函数是指函数只带有function这个关键字,而没有像abs这种函数名称的函数,如function(){}.ES6标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义.它们各自的区别是什么呢? 1 带名和匿名函数的区别 区别:匿名函数需要讲地址赋值给另一个变量let a,然后再用a来调用函数:而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称

  • javascript实现通过表格绘制颜色填充矩形的方法

    本文实例讲述了javascript实现通过表格绘制颜色填充矩形的方法.分享给大家供大家参考.具体如下: <html> <head> <title> Javascript画矩形 </title> <script type="text/javascript"> //定义函数,传入设置参数,返回一个有背景颜色的表格 function drawFilledRect(x,y,w,h,color) { document.write(&qu

  • C#画笔Pen绘制光滑模式曲线的方法

    本文实例讲述了C#画笔Pen绘制光滑模式曲线的方法.分享给大家供大家参考.具体实现方法如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; using System.Drawing.Drawing2D; namesp

  • python绘制多个曲线的折线图

    python绘制多个曲线的折线图

    这篇文章利用的是matplotlib.pyplot.plot的工具来绘制折线图,这里先给出一个段代码和结果图: # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里导入你自己的数据 #...... #...... #x_axix,train_pn_dis这些都是长度相同的list() #开始画图 sub_axix = filter(lambda

  • JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法.分享给大家供大家参考,具体如下: 箭头函数在 JavaScript 里面,是 ES6(ES2015)才加入进来的.因为函数里有个像箭头一样的符号:=>,所以叫箭头函数,英文经常也会称为 Fat arrow functions,胖乎乎的箭头函数.这种函数也称为 lambda 表达式.箭头函数不能当作构造函数使用. 语法 一个箭头函数看起来像这样: const

  • Android LineChart绘制多条曲线的方法

    本文实例为大家分享了Android LineChart绘制多条曲线的具体代码,供大家参考,具体内容如下 目标效果: 1.新建custom_marker_view.xml页面作为点击弹出框的页面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" andr

随机推荐