资讯专栏INFORMATION COLUMN

《每周一点canvas动画》——三角函数

Nekron / 399人阅读

摘要:常用三角函数前面我们简单的介绍了三角函数的表示方法以及的坐标系统。总结这节你应该学会了如何运用三角函数,控制物体的旋转。

本节主要内容有:

三角函数介绍

常用三角函数解析

鼠标跟随角度旋转

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

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 文件

  
      you browser not support canvas
  

   //引入我们的工具函数文件
   //引入我们的箭头函数文件
  

我们最终得到的结果就是一个,可以跟随鼠标旋转的箭头。

总结

这节你应该学会了如何运用三角函数,控制物体的旋转。重点公式:

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/55456.html

相关文章

  • 周一canvas动画》——3D线与水波动画

    摘要:在数学上,递推关系,也就是差分方程,是一种递推地定义一个序列的方程式序列的每一项目是定义为前一项的函数。 《每周一点canvas动画》——差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在才更新实在不好意思。这次我们不涉及canvas 3D的内容,主要分享一个比较炫的动画效果,可以算是上一篇文章《每周一点canvas动画》——3D...

    codeKK 评论0 收藏0
  • 周一canvas动画》——3D线与水波动画

    摘要:在数学上,递推关系,也就是差分方程,是一种递推地定义一个序列的方程式序列的每一项目是定义为前一项的函数。 《每周一点canvas动画》——差分函数的妙用 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在才更新实在不好意思。这次我们不涉及canvas 3D的内容,主要分享一个比较炫的动画效果,可以算是上一篇文章《每周一点canvas动画》——3D...

    jaysun 评论0 收藏0
  • 周一canvas动画》——差分函数的妙用

    摘要:在数学上,递推关系,也就是差分方程,是一种递推地定义一个序列的方程式序列的每一项目是定义为前一项的函数。某些简单定义的递推关系式可能会表现出非常复杂的混沌的性质,他们属于数学中的非线性分析领域。 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在更新我也没什么不好意思的。这次我们不涉及canvas 3D的内容,主要分享一个比较炫的动画效果,可以算...

    meislzhua 评论0 收藏0
  • 周一canvas动画》——差分函数的妙用

    摘要:在数学上,递推关系,也就是差分方程,是一种递推地定义一个序列的方程式序列的每一项目是定义为前一项的函数。某些简单定义的递推关系式可能会表现出非常复杂的混沌的性质,他们属于数学中的非线性分析领域。 每周一点canvas动画代码文件 好像上次更新还是十一前,这唰唰唰的就过去大半个月了,现在更新我也没什么不好意思的。这次我们不涉及canvas 3D的内容,主要分享一个比较炫的动画效果,可以算...

    hsluoyz 评论0 收藏0
  • 周一canvas动画》——修改增强版

    摘要:年的某一天,不小心看了下自己写的几篇文章,瞬间被恶心到了。本周已经开始对删除的文章着手回复,目前进度如下每周一点动画序每周一点动画用户交户每周一点动画三角函数每周一点动画波形运动新增平滑运动以及各项运动形式的动画效果图 2016年的某一天,不小心看了下自己写的几篇文章,瞬间被恶心到了。 语句不通顺 废话一大堆 标点符号错乱 图片丑陋 排版恶心 缺少实际demo,并且没有直观的在线体验...

    shery 评论0 收藏0
  • 周一canvas动画》——修改增强版

    摘要:年的某一天,不小心看了下自己写的几篇文章,瞬间被恶心到了。本周已经开始对删除的文章着手回复,目前进度如下每周一点动画序每周一点动画用户交户每周一点动画三角函数每周一点动画波形运动新增平滑运动以及各项运动形式的动画效果图 2016年的某一天,不小心看了下自己写的几篇文章,瞬间被恶心到了。 语句不通顺 废话一大堆 标点符号错乱 图片丑陋 排版恶心 缺少实际demo,并且没有直观的在线体验...

    xiaowugui666 评论0 收藏0

发表评论

0条评论

Nekron

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<