javascript三⾓函数的使⽤
其实很多编程语⾔⾥⾯都有数学函数，⽽且很多数学函数包括三⾓函数，只不过有些时候可能我们⽤的并不多，我最近在做⼀个h5的游戏，其中有⼀个需求就是射击的⽀需要更随⿏标变换位置，⿏标移动到什么地⽅，炮⼝就要指向那个⽅位，刚开始⼀直不能理解，后来朋友提供了思路，其实使⽤的就是javascript⾥⾯的三⾓函数。
  ⾸先呢，我们复习⼀下⾼中时候学习的三⾓函数的的基本知识吧，我这⾥介绍其中⼏个简单的，第⼀个是sin函数，第⼆个是cos函数，第三个是tan函数，四四个是atan函数，sin函数在数学⾥⾯其实是⼀个三⾓形的对边⽐上斜边得出的值，我们来看⼀个图像
，那么cos30=x/r,cos函数是临边⽐上斜边，tan30=y/x，tan函数则是对边⽐上临边，通过这些公式，我们可以很容易的得到这个三⾓函数的值，然后就阔以拿这些值去做有意思的事情啦！！
  那么我们在javascript⾥⾯的三⾓函数和数学中的三⾓函数其实有⼀点区别外，第⼀是写发上不⼀样，js⾥⾯三⾓函数都是静态⽅法，必须使⽤Math来调⽤，三个函数分别是Math.sin()，s()，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,s(n)*r，有⼈也许会说为什么t的值是乘以⼀个-r，原因就是我们在检测的时候其实是把360度分成四个区域，当⿏标在左上⽅的时候，⼩球的位置是向左边以及向上边同时运⾏的，⼩球往左边⾛，当然是把⼩球当前的位置加上往左边要⾛的距离，如果要往上边⾛的话则要把⼩球当前距离上边的距离减去要移动的距离，⼩球才能往上⾛，这个相信⼤家都明⽩，距离上边的值越⼩⾃然就越靠上，对吧那么对应的在其他三个区域，这个r的值也
是有所变化，有的时候取正值有的时候取负值，都是看他具体的运动⽅向和当前的位置，这个很容易，刚才也讲过了，就不再啰嗦了！
  最后就是判断⿏标在哪⼀个区域上，这个其实也挺简单的，我举⼀个例⼦就可以了，当⿏标在右上⽅的时候，我们来对⽐⿏标和⼩球的位置，右上⽅的⿏标距离左边的值肯定是⼤于⼩球距离左边的值的，距离上边的值肯定是⼩于⼩球距离上边的值的，满⾜这两个条件，则表明⿏标在左上⽅。ok??相信⼤家都懂了，再说⼀句，这个判断⽅法学名好像叫象限判定发。
text函数什么意思  以上就是js的三⾓函数的简单使⽤，这个例⼦是有点bug的，有兴趣的朋友⾃⾏解决吧其实还可以开发出很多更有的效果，当然js 的三⾓函数还有⼀下其他的，不过使⽤起来都是⼤同⼩异，⼤家看看就阔以啦，下⾯是这个案例的代码，有兴趣的朋友可以看看！
/***********例⼦来了*************/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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 = ElementById('box');
var r=50;
document.οnmοusemοve=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 = s(angle)*r;
cy = Math.sin(angle)*-r;
}
if(oev.clientX<obox.offsetLeft && oev.clientY<obox.offsetTop){
cx = s(angle)*-r;
cy = Math.sin(angle)*-r;
}
if(oev.clientX<obox.offsetLeft && oev.clientY>obox.offsetTop){
cx = s(angle)*-r;
cy = Math.sin(angle)*r;
}
if(oev.clientX>obox.offsetLeft && oev.clientY>obox.offsetTop){
cx = s(angle)*r;
cy = Math.sin(angle)*r;
}
p = 400+cy+'px';
obox.style.left = 400+cx+'px';
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。