javascript支持三角函数。js中的三角函数都是静态方法,必须使用math来调用,因此语法格式为“math.sin(x)”,“math.cos(x)”,“math.tan(x)”。
本教程操作环境:windows7系统、javascript1.8.5版、dell g3电脑。
javascript支持三角函数。它们分别为:“math.sin(x)”,“math.cos(x)”,“math.tan(x)”。
下面我们来看看javascript支持三角函数。
首先呢,我们复习一下高中时候学习的三角函数的的基本知识吧,我这里介绍其中几个简单的,第一个是sin函数,第二个是cos函数 ,第三个是tan函数,四四个是atan函数,sin函数在数学里面其实是一个三角形的对边比上斜边得出的值,我们来看一个图像
那么cos30=x/r,cos函数是临边比上斜边,tan30=y/x,tan函数则是对边比上临边,通过这些公式,我们可以很容易的得到这个三角函数的值,然后就阔以拿这些值去做有意思的事情啦!!
那么我们在javascript里面的三角函数和数学中的三角函数其实有一点区别外,第一是写发上不一样,js里面三角函数都是静态方法,必须使用math来调用,三个函数分别是math.sin(),math.cos(),math.tan()。
这个很容易理解咯,那么第二个不同就是数学里面的三角函数使用接受的参数是角度,但是在js里面所接受的参数是弧度,有的朋友可能晕了,弧度角度什么玩意???不要着急,这里简单介绍一下,我们首先来看一个圆
如果一个圆的一段边的长度等于这个圆的半径长度,那么这段边就代表一弧度,正如图中红色部分,就代表一弧度,这个其实仅仅就是一个概念,我们真正要使用的是吧我们想要的角度转化成弧度,这里直接套用数学公公式 1角度=π/180 那么10个角度就等于10*π/180啦
那我们要用js的math.sin()算出30度角等于多少,那么就应该写成math.sin(30*math.pi/180),这里注意一下js里面的π是math.pi。相信大家看到这里对js的三角函数肯定有一些了解咯,那么接下来我们来看一个实际的小例子吧。
首先呢,有一个需求。页面上有一个小球,我希望当我的鼠标放到页面上时候,我的鼠标移动到那里。小球就会移动到对应的位置,注意,不是移动到鼠标所在的位置,而是对应的位置,这里不好发网址,发个图看看吧。
其中,红色小球代表一个枪口。蓝色的小球代表鼠标的位置,当鼠标放置到页面不同位置的时候,红色的小球就会移动到相应的角度上与之对应,但是我们也看到有一个r,表示在平面的范围呢,红色小球能够移动的范围,实际上就是一个圆的半径,如果这个r越大,那么小球移动的范围就越大啦!!(不理解的朋友先把下面的例子复制出来运行一下就可以了)
这个功能的实现就需要我们使用三角函数来完成,检测鼠标的位置并且是在360度的范围上来检测,这里就需要通过角度就算出红色小球的距离左边值和距离上边的值,然后赋值给小球就阔以啦!!我们再来看一张图
下面是这个案例的代码,有兴趣的朋友可以看看!
/***********例子来了*************/<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><title>document</title><style>#box{width:30px;height:30px;background:red;position:absolute;top:400px;left:400px;border-radius:15px;}</style></head><body><p id="box"></p></body><script>var obox = document.getelementbyid('box');var r=50;document.onmousemove=function(ev){var oev = ev||event;var x = math.abs(oev.clientx-obox.offsetleft);var y = math.abs(oev.clienty-obox.offsettop);var angle = math.atan(y/x);var cx=0;var cy=0;if(oev.clientx>=obox.offsetleft && oev.clienty<=obox.offsettop){cx = math.cos(angle)*r;cy = math.sin(angle)*-r;}if(oev.clientx<obox.offsetleft && oev.clienty<obox.offsettop){cx = math.cos(angle)*-r;cy = math.sin(angle)*-r;}if(oev.clientx<obox.offsetleft && oev.clienty>obox.offsettop){cx = math.cos(angle)*-r;cy = math.sin(angle)*r;}if(oev.clientx>obox.offsetleft && oev.clienty>obox.offsettop){cx = math.cos(angle)*r;cy = math.sin(angle)*r;} obox.style.top = 400+cy+'px';obox.style.left = 400+cx+'px';}</script></html>
【推荐学习:javascript高级教程】
以上就是javascript支持三角函数吗的详细内容。