其实很多编程语言里面都有数学函数，而且很多数学函数包括三角函数，只不过有些时候可能我们用的并不多，我最近在做一个h5的游戏，其中有一个需求就是射击的枪支需要更随鼠标变换位置，鼠标移动到什么地方，炮口就要指向那个方位，刚开始一直不能理解，后来朋友提供了思路，其实使用的就是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度的范围上来检测，这里就需要通过角度就算出红色小球的距离左边值和距离上边的值，然后赋值给小球就阔以啦！！我们再来看一张图，现在要做的就是如何获取t的值和l的值，我们刚才已经说了小球运动是有范围的，这个范围其实就是一个圆，而半径的大小决定小球运动范围的大小，所以呢这个半径是我们自己定义的，随你定义多少都阔以，当然太小了可能效果就不是那么明显了，因此图中的r我们其实已经知道了，我们就定义成100吧，接下来我们看一个推导公式  sin30=t/r 那么t=sin30*r   cos30=l/r  那么l=cos30*r,怎么样？有木有很激动，就是这样算出来的！！但是问题来了，这个角度该怎么得到呢，刚才我们只是随意随意写了个角度来推导，而事实上我们的鼠标在不停的移动，角度自然也是在不停的变化啦,我们看一下上图中的大三角形，看准了，是红色的大三角形，不是蓝色的小三角形哦！这个大三角形对应的边分别是a边和b边，只要我们得到a边和b边的长度，然后用反正切函数atan(a/b)就可以得到鼠标与球的夹角啦，这个反正切函数Math.atan(),接受一个参数，就是对边比上临边的值，他会更具这个值返回对应的弧度，这个弧度就是我们需要的咯，那么这个a和b怎么算出来了，这个就简单了，我们通过js可以很容易获取到鼠标距离上边和左边的距离，然后又能获取到小球距离左边和上边的距离，我们把鼠标距离上边的距离减去小球距离上边的距离，然后取一个绝对值，不就是ad的值了嘛，吧=把鼠标距离左边的距离减去小区距离左边的距离，再去一个绝对值，不就是b的值咯，这样我们在通三角函数Math.atan(b/a)就可以得到我们想要的那么角度了，哈哈，拿到角度以后我们来套公式吧，假设我们实时得打的角度是n,那么对应的t就是 t = Math.sin(n)* -r,l=Math.cos(n)*r,有人也许会说为什么t的值是乘以一个-r,原因就是我们在检测的时候其实是把360度分成四个区域，当鼠标在左上方的时候，小球的位置是向左边以及向上边同时运行的，小球往左边走，当然是把小球当前的位置加上往左边要走的距离，如果要往上边走的话则要把小球当前距离上边的距离减去要移动的距离，小球才能往上走，这个相信大家都明白，距离上边的值越小自然就越靠上，对吧！！！那么对应的在其他三个区域，这个r的值也是有所变化，有的时候取正值有的时候取负值，都是看他具体的运动方向和当前的位置，这个很容易，刚才也讲过了，就不再啰嗦了！

　　最后就是判断鼠标在哪一个区域上，这个其实也挺简单的，我举一个例子就可以了，当鼠标在右上方的时候，我们来对比鼠标和小球的位置，右上方的鼠标距离左边的值肯定是大于小球距离左边的值的，距离上边的值肯定是小于小球距离上边的值的，满足这两个条件，则表明鼠标在左上方。ok??相信大家都懂了，再说一句，这个判断方法学名好像叫象限判定发。

　　以上就是js的三角函数的简单使用，这个例子是有点bug的，有兴趣的朋友自行解决吧！！！其实还可以开发出很多更有的效果，当然js的三角函数还有一下其他的，不过使用起来都是大同小异，大家看看就阔以啦，下面是这个案例的代码，有兴趣的朋友可以看看！

/***********例子来了*************/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<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>
<div id="box"></div>
</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三角函数的使用的更多相关文章

  1. 三角函数 与 JavaScript

    三角函数   canvas 和 JavaScript 中所有与角相关的API如Math.sin().Math.cos().Math.tan(),都需要以弧度为单位值.但大部分人还是习惯以角度单位.所以 ...

  2. 三角函数与JavaScript

     1. 三角函数 sin&(求对边与斜边的比值) cos&(邻边与斜边的比值) tan&(对边与邻边的比值) 2.JavaScript的函数的使用 Math.sin() Mat ...

  3. javascript中的简单三角函数

  4. Make Things Move -- Javascript html5版（三）三角函数形式的动画

    角度制和弧度制 生活中通常是用角度度来理解的,代码里都是用弧度制来计算. 角度转弧度:DEG_TO_RAD = Math.PI / 180 弧度装角度:RAD_TO_DEG = 180 / Math. ...

  5. javascript运动学教程

    本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...

  6. JavaScript由浅入深（一）——类型、值和变量

      JavaScript是一门面向web的.高端的.动态的.弱类型的编程语言,是学习web前端开发必备的基础技能之一.JavaScript最初是一门脚本语言(scripting-language),它 ...

  7. javascript类型系统——Math对象

    × 目录 [1]常量 [2]函数 前面的话 javascript使用算术运算符实现基本的算术运算,如果要实现更加复杂的算术运算,需要通过Math对象定义的常量和函数来实现.和其他对象不同,Math只是 ...

  8. 【JavaScript】内置对象Math

    Math是具有用于数学常数和函数的属性和方法一内置对象.不是函数对象. 描述编辑 不像其他的全局对象,Math不是一个构造函数.所有属性和方法Math都是静态的.你指的是常数pi为Math.PI你调用 ...

  9. Javascript算术运算

    Javascript中Math对像的一些复杂算术运算方法: Math.pow(2,53)  //2的53次幂 结果:9007199254740992 Math.round(0.6)  //0.6四舍五 ...

随机推荐

  1. PHP Extension开发(Zephir版本)

    上篇介绍了C语言开发PHP扩展的方法, 现在介绍使用Zephir开发扩展的方法. 关于Zephir需要简单介绍一下: Zephir 是为PHP开发人员提供的能够编写可编译/静态类型的高级语言.是优秀的 ...

  2. angularjs 服务详解

    一.服务 服务提供了一种能在应用的整改生命周期内保持数据的方法,它能够在控制器之间进行通信,并保持数据的一致性. 1.服务是一个单例对象,在每个应用中只会被实例化一次(被$injector): 2.服 ...

  3. CSS中可以继承和不可继承的常见属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  4. Java中从键盘输入的三种方法

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...

  5. C/C++语言简介之程序结构

    C语言的模块化程序结构用函数来实现,即将复杂的C程序分为若干模块,每个模块都编写成一个C函数,然后通过主函数调用函数及函数调用函数来实现一大型问题的C程序编写,因此常说:C程序=主函数+子函数.因此, ...

  6. TzObjectInspector 一例

    TzObjectInspector Github上的一个开源组件!可以做到类似Delphi IDE属性,事件面板的样式!作者持续更新中... 看起来是这个样子: 这个东西用起来并不像想象的那样可以直接 ...

  7. C++学习笔记第三天：类、虚函数、双冒号

    类 class Box { public: double length; // 盒子的长度 double breadth; // 盒子的宽度 double height; // 盒子的高度 }; 类成 ...

  8. mybatis与spring的整合(使用sqlSession进行crud)

    上次介绍了用接口的方法极大的节省了dao层,只需通过 配置文件和接口就可以实现,这次介绍的是通过splsession来实现dao,这种方法比较灵活: 先不说,上配置文件: 1.web.xml < ...

  9. Linux sed 和 awk的用法

    sed用法: 原文链接:http://www.cnblogs.com/dong008259/archive/2011/12/07/2279897.html sed是一个很好的文件处理工具,本身是一个管 ...

  10. shell脚本 sed工具

    sed工具概述(流式编辑器)非交互,基于模式匹配过滤及修改文本逐行处理,并将结果输出到屏幕可实现对文本的输出,增,删,改,查等各种操作 sed流控制:!:取反操作,根据定址条件取反n:读下一行,产生隔 ...