• 技术文章 >web前端 >前端问答

    JavaScript支持三角函数吗

    青灯夜游青灯夜游2021-11-03 16:57:51原创308

    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支持三角函数吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:JavaScript 三角函数
    上一篇:python与javascript有什么区别 下一篇:JavaScript中数组长度可以变吗
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• javascript有哪两种选择语句• javascript怎么设置img src值• javascript的es是什么• javascript如何隐藏a标签• javascript中的移入移出函数是什么
    1/1

    PHP中文网