本节重要内容有：

• 三角函数引见

• 经常应用三角函数剖析

• 鼠标追随角度扭转

看到三角函数，勾股定理如许的数学名词是否是有种双腿颤抖的觉得啊！好吧，就算你已吓尿了，也不能否定我们中学进修的学问终究有了用武之地，挽起袖子，开整！！！

1、三角函数

什么是三角函数呢？简朴的定义：所谓三角函数，在多少上来讲就是夹角与边的关联！为了更直观的示意，也为了让遗忘的同砚回想起来，这里我给个示意图。

在上图中例出了几个经常应用的三角函数，角度与边（x, y和R）之间的关联如公式所示！那末在canvas中角度与边之间的关联是怎样的呢？起首，我们须要晓得的是canvas中坐标是怎样定义的。

如图所示，与一般坐标差别，canvas坐标以全部画布的左上角作为坐标原点，y轴朝下为正，x轴程度向右。坐标差别，对应的角度示意就有所差别，这个差别重要体如今角度的正负上。

上图中canvas的坐标与一般坐标觉得一样，但我想表达的是在canvas中顺时针方向为正，逆时针为负。

2、经常应用三角函数

前面我们简朴的引见了三角函数的示意要领以及canvas的坐标体系。然则，在现实开辟中我们不仅想要经由历程角度来推出双方的间隔长度比值。而更体贴的是怎样经由历程已知的间隔(因为坐标的位置很好肯定)来推出角度。这里我们要用到反三角函数

sin(θ)=x/R   --->  θ = arcsin(x/R)
cos(θ)=y/R   --->  θ = arccos(y/R)
tan(θ)=x/y   --->  θ = arctan(x/y)

对应到javascript中,响应示意要领以下。

sin(θ)  --->  Math.sin( θ * Math.PI/180 )
cos(θ)  --->  Math.cos( θ * Math.PI/180 )
tan(θ)  --->  Math.tan( θ * Math.PI/180 )

θ = arcsin(x/R) ---> Math.asin(x/R)*(180/Math.PI)
θ = arccos(y/R) ---> Math.acos(y/R)*(180/Math.PI)
θ = arctan(x/y) ---> Math.atan(x/y)*(180/Math.PI)

好吧！看到这里或许你已恶心得想吐了。然则，没办法这就是数学的魅力！这里须要强调的是：canvas中角度的示意采纳的是弧度制。如许你就能够邃晓 θ * Math.PI/180是将角度转成弧度，比方：30° = 30 * π /180 = π / 6。 而将弧度转成角度天然就要用弧度值`Math.asin(x/R) 乘上180/Math.PI`。这之间的转换关联，逐步想一想就邃晓了！

3、Math.atan2(dy, dx)

比拟于Math.asin()和Math.cos()这两个函数，Math.atan()在开辟中用到的更多。它能够直接经由历程两个直角边获得对应的角度值。比拟于其他两个须要经由历程盘算长边来获得角度值来讲，盘算历程越发简朴！然则，该函数在角度的剖断上回涌现一个题目——存在两个雷同的角度值而没法剖断物体细致的扭转角度。细致申明以下图所示。

因为，tan函数的周期是（-π/2, π/2）,因为这一特征致使电脑是没法推断扭转的究竟是哪一个角度！！！这时候，另一个函数就横空出世了，铛铛铛铛，他就是Math.atan2(dy, dx)!他不仅处理了上面我们说的题目，而且只须要传入横纵坐标间隔就能够盘算出对应的角度值！是否是很酷。

4、追随鼠标扭转

本章的理论学问已引见完成。如今，最先我们的第一个demo——rotate-to-mouse.html望文生义就是追随鼠标扭转。起首建立一个文件arrow.js，这个文件是应用canvas画一个箭头，而且为了以后方便应用，将它写成一个类文件！代码以下：

arrow.js文件

    function Arrow() {
        this.x = 0;  //初始位置
        this.y = 0;
        this.rotation = 0;  //初始扭转角度
        this.color = '#ffff00';

    }
    //在原型上定义draw要领
    Arrow.prototype.draw = function(context){
        context.save();
        context.translate(this.x , this.y); //将坐标移到this.x 和 this.y
        context.rotate(this.rotation); //设置扭转角度
        context.lineWidth = 5;  //设置线宽
        context.fillStyle = this.color; //设置添补色
        context.beginPath();  //途径最先
        context.moveTo(-50,-25);
        context.lineTo(0,-25);
        context.lineTo(0,-50);
        context.lineTo(50,0);
        context.lineTo(0,50);
        context.lineTo(0,25);
        context.lineTo(-50,25);
        context.closePath(); //途径闭合
        context.stroke(); //描边
        context.fill(); //添补
        context.restore();
    }

如今我们在rotate-to-mouse.html文件中引入它，来建立一个箭头

rotate-to-mouse.html 文件

  <canvas id='canvas' width="500" height="500" style="background:#ccc;">
      you browser not support canvas
  </canvas>

  <script src="../js/utils.js"></script> //引入我们的东西函数文件
  <script src="../js/arrow.js"></script> //引入我们的箭头函数文件
  <script>
      window.onload = function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width/2;
        var centerY = canvas.height/2;
        
        //传入canvas,猎取鼠标在canvas上挪动是的坐标
        var mouse = utils.captureMouse(canvas);
             
        //新建一个arrow对象
        var arrow = new Arrow();
             
        //将arrow的坐标设置为canvas的中间
        arrow.x = centerX;
        arrow.y = centerY;
                 
      //动画轮回函数
      (function drawFrame(){
          window.requestAnimationFrame(drawFrame,canvas);
          context.clearRect(0, 0, canvas.width, canvas.height);
                  
          //猎取dy,dx值
          var dx = mouse.x - arrow.x,
          dy = mouse.y - arrow.y;
                      
          //设置扭转角度
            arrow.rotation = Math.atan2(dy, dx);
                    
         //挪用draw要领画出
           arrow.draw(context);

      })();
}

</script>

我们终究获得的效果就是一个，能够追随鼠标扭转的箭头。

总结

这节你应当学会了怎样应用三角函数，掌握物体的扭转。重点公式：

dx = mouse.x - object.x;
dy = mouse.y - object.y;
object.rotation = Math.atan2(dy,dx);