三角(反三角)函数在javascript中的应用

2,170 阅读8分钟

天道有轮回,苍天饶过谁!!!其实数学在我们生活当中或者是工作当中,其实用的地方非常之多,我们今天就来聊一下三角(反三角)函数在javascript中的应用。

三角函数

先看一下勾股定理 a^2+b^2=c^2

根据勾股定理可以得出

再看几个API

Math.pow() 平方/立方

  • Math.pow(2,3) // 2的立方
  • Math.pow(2,2) // 2的平方

Math.sqrt() 开方

Math.sqrt(9) // 3 只能开平方,不能开立方或者是n次方

那 √ ̄3^2+4^2=5 用javascript怎么表示呢?

Math.sqrt(Math.pow(3,2)+Math.pow(4,2))  //5

那么勾股定理可以用来做什么呢?勾股定理最容易实现的就是已知两点坐标求距离这样的应用

即A点到B点的距离为 c=Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))

好了,切入正题

三角函数

解决的问题:在直角三角形中,已知一个角度,和一条边,可求出另一条边 三角函数在我们数学当中有很多不同的形式,其中我给大家介绍其中的三种,其实还有很多,我们主要平时用的时候用这三个就够了

  • sina
  • cosa
  • tana

在js中分别对应:

  • Math.sin(弧度)
  • Math.cos(弧度)
  • Math.tan(弧度)

注意它们的参数不是角度,而是弧度!!!,因为计算机当中无法表示角度,只能用弧度来表示 那角度与弧度之间是怎么转换的呢?

一圈有多少度呢?一圈就是360度对吧,弧度是什么?弧度是另外一个跟角度有关的单位,就是另外一种写法。为什么会有两种写法?因为角度更多的是在我们生活当中,或者是在咱们数学当中。而弧度一般都是作为计算机当中来使用的,比较专业,计算机都是用弧度来表示的,所以说只要你知道它们之间的一个关系,其实不管是角度和弧度都都是可以换算的。

一弧度概念

首先先来了解一下弧度究竟指的是什么?一弧度到底等于多少?想知道一弧度概念,我们先画一个圆

用r表示半径 ,a表示所对应的角度 。那么弧度指角a所对圆的弧曲线这一块,假如说这个曲线它等于半径(r)的话,如果把这个曲线给拉直了,拉直之后,它就等于半径, 那么我们就把a这个角度叫做一弧度。所以说一弧度的概念,它其实就是这个角对应的曲线,它的长度如果等于半径(r),就是一弧度。

那整个一个圆,有多少弧度呢?那我们知道r对应的曲线是一弧度,整个有多少个r呢? 我们就需要了解圆的周长该怎么去求。圆的周长就要涉及到另一个概念π。

π=3.1415926......

怎么计算的呢? 有两种计算方式 第一种是圆的周长除以直径等于π,还有一种就是圆的面积除以半径的平方也是π 即

圆的周长/2π=π

那么 圆的轴承=2πr

上面说了 一弧度等于半径(r) 那整个圆有多少弧度?

那么整个圆的弧度=2πr/r=2π

好,既然整个圆它有2π这样一个弧度的话,那一圈所占的角度是多少呢?360度。所以说360度跟2π弧度应该是相等的关系,都是一圈,只不过是两个不同的单位,所以说我们就可以得到这样一个公式

360度=2π(弧度)

那么角度和弧度都可以换算出来

用弧度来表示1度 javascript写法就是

Math.PI/180

所以在javascript中sin30度就可以这样表示

Math.sin(30*Math.PI/180)   //30度角所对应的弧度==>0.5

π在javascript中是一个常量 用Math.PI表示

那么现在我们就来看一个物体做圆周运动的例子

Math.sin( 度数*Math.PI/180 ) = y/r
Math.cos( 度数*Math.PI/180 ) = x/r

圆周运动demo

github.com/wensiyuanse…

那做一个三维的有立体空间感的圆周运动怎么做呢?

如何能做出来像三维运动这样更复杂的运动,我们需要了解的知识点就更多了,不仅仅只限于三角函数。你需要再配合一些数学、物理等等一些领域的知识,然后才能做出来更丰富的效果。

我们首先先来想第1个问题,上图本身就是一个平面,它没办法去产生三维,那是必须我们要做到一件事情,就是利用这个平面,能够让我们从视觉上感受出来,它是个三维的。好,怎么感受呢?如果说你是学过画画的,你就应该知道三维空间就是近大远小,这样一个概念

比如说这个小一点的圆就相当于是远方。那大一点的圆不就相当于是离你比较近了。如果说我们现在把他们之间加个横线给连起来,这个圆柱是不是就出来了?

好,这个圆柱出来了,是不是就有点立体的感觉了?假如说这是个圆木,然后上面站了一个人

那是不是就可以让这根圆木动起来了呢?

其实发现不需要特别深的一些理念,只是简简单单的近大远小就可以实现3D的效果,利用这样一个概念,我们做圆周运动,立体的三维的圆周运动其实就很容易了,你只需要想象成,它离你近了就大,离远了就小就可以了。

除了近大远小的知识点以外,我们还需要了解一个坐标系。在平面当中我们物体动起来,它是有X坐标和Y坐标就够了,三维的它还有一个Z轴坐标系。

如果方块想让Y轴走的话,大家首先要想一想,top值变没变?其实这个top值并没有变。绕Y轴进行旋转的时候,X轴和Z轴是变的,但是Y轴是不变的。Y轴不变,那说明元素的top值是不变的,对吧。X轴控制什么呢?X轴我们来控制物体的let值,而Z轴控制物体的什么?物体的大小!!!Z轴越大说明物体就越大,Z轴越小说明物体就越小,对吧?这样一个关系。所以说有了这个关系之后就很好做了。

  • X轴控制物体的let值
  • Y轴是不变===>元素的top值不变
  • Z轴越大说明物体就越大,Z轴越小说明物体就越小

再想Z轴最大值和最小值是多少呢?Z轴的绝对值其实就是半径,假如半径为100px,那Z轴最大值为100px,最小值为-100px,其实就是啥呢,Y轴变成Z轴了(多了个正负),Y轴没用了(不变)。Z轴的大小其实是一直在变的

写法为

var x = 700;
var a = Math.sin(度数 * Math.PI / 180) * r;
var b = Math.cos(度数 * Math.PI / 180) * r;
oDiv.style.left = x + b + 'px';
oDiv.style.width = a / 100 * 30 + 50 + 'px'; //100为半径,30为比率,50是方块的原始宽高
oDiv.style.height = a / 100 * 30 + 50 + 'px';

demo github.com/wensiyuanse…

如果说你要想做得更好一点,可以用三维旋转矩阵来做,效果会更炫。

反三角函数

解决的问题:在直角三角形中,已知两条边可求出未知的角度或弧度

在一个直角三角形中 如果已知a,b,c三边中的两条边 怎么求角a 或 b 呢 那么就可以用反三角函数来求角度或弧度值。 反三角函数在js中的写法

  • Math.asin( a/c )
  • Math.acos( b/c )
  • Math.atan( a/b )

在反三角函数中求出来的值都是弧度

假如 a=1 c=2 套入公式

Math.asin(1/2)  //0.5弧度

怎么转换为角度呢

Math.asin(1/2)*180/Math.PI  //30度

三角函数图像

如果说你做一些像流体效果的话,你必须得掌握三角函数图像,要不然你做不了流体效果 比如

juejin.cn/post/684490…

先看几个概念

单位圆坐标系

一个圆可以在坐标系中用坐标的形式表示出来就是单位圆坐标系

如图所示 x轴其实对应的是cos y轴对应的是sin

那弧度与sin之间有什么关系呢?

那就可以通过js把这个图像给画出来。正弦函数,余弦函数相应的也可以表示出来 用left表示弧度 top表示角度

github.com/wensiyuanse…

正弦曲线公式:y = A sin(Bx + C) + D

  • A 控制振幅,A 值越大,波峰和波谷越大,A 值越小,波峰和波谷越小;

  • B 值会影响周期,B 值越大,那么周期越短,B 值越小,周期越长。

  • C 值会影响图像左右移动,C 值为正数,图像右移,C 值为负数,图像左移。

  • D 值控制上下移动。

这个公式非常有用,如果下文的代码让你不解,记得回来查看注解。

参考

www.w3cplus.com/javascript/…