canvas分享之三角函数（1）

这一节会分为两部分来讲，在第一部分主要讲下面这三个部分：

• 三角函数!

• 常用三角函数

• 角度旋转（运用实例）

在下一节主要讲解：

• 波形运动

• 圆周运动

• 两点间的距离

ok!现在开始我们的上部分，看到三角函数，勾股定理这样的数学名词是不是感到双腿打颤啊。好吧！就算你已经吓尿了，也不能否认我们初中学习的知识终于有了用武之地，挽起袖子，开整！！！

1、三角函数

什么是三角函数呢？我给他了一个简单的定义：所谓三角函数，在几何上来说就是夹角与边的关系！为了更直观，也为了让忘记的同学回忆起来，这里我给个示意图：

在上图中我示例出了几个常用的三角函数，角度与边（x, y和R）之间的关系！那么在canvas中角度与边之间的关系是怎样的呢？

如图所示，普通坐标与canvas坐标是不同的，canvas坐标以左上角作为坐标原点，y轴朝下为正。
那么坐标不同，对应的角度表示就会有所差异，这个差异主要体现在角度的正负，千言万语不如一图：

好了，这就是在canvas中角度的正负表示。

2、常用三角函数

前面我们简单的介绍了三角函数的表示方法，知道了三角函数表示的是角度与边之间的关系，但是在实际开发中我们不仅想要通过角度来推出两边的距离长度比值，而更关心的是如何通过已知的距离(因为坐标的位置很好确定)来推出角度。那么，应该如何做呢？这里我们要用到反三角函数

那么对应到，javascript中的相应表示方法是什么呢？这里做个小的归纳：

好吧！看到这里也许你已经恶心得想吐了，但是，没办法这就是数学的魅力！这里需要强调的是在canvas中采用的是弧度制。这样你就可以理解 θ * Math.PI/180是将角度转成弧度，比如：30° = 30 * π /180 = π / 6。 而将弧度转成角度自然就要用弧度值`Math.asin(x/R) 乘上180/Math.PI`。这之间的转换关系，慢慢想想就明白了！

Math.atan2(dy, dx)

那么这里！有一个重点要讲的函数，Math.atan(...)这个函数，他可以直接通过两个直角边得到角度值，相比于其他两个需要通过计算长边来得到角度值来说，是不是更酷了！但是它有个问题，因为这个arctan这个函数的特性(这里就不细讲了，纯数学知识，以免有卖弄之嫌)它会导致一个很重要的问题，上图：

简单的说，就是使用Math.atan(...)你会得到两个相同的角度值，而电脑是无法判断你到底是转的哪个角度！！！这时，另一个函数就横空出世了，当当当当，他就是Math.atan2(dy, dx)!他不仅解决了上面我们说的问题，而且只需要传入两个横纵坐标距离！是不是很酷。

好吧！说了这么多，那么现在开始我们的第一个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);