站长资讯网
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高级教程】