关闭

js数学 atan2 cos sin

标签: canvas数学计算html5动画
1485人阅读 评论(0) 收藏 举报
分类:

这里写图片描述

1.给出相对坐标中心o,p1到o的距离l,p1到x轴的角度angle(0~2PI)

left:x0+Math.cos(angle)
top:  y0+Math.sin(angle)

2.给出相对坐标中心o,p1坐标,求p1关于x轴的夹角

//angle大于-Math.PI,小于Math.PI
// (-∏,∏)   
var angle=astan2(y1-y0,x1-x0);

案例:

这里写图片描述

用canvas写一个摆动角在60度到120度之间的循环动画,要求长方体随着摆动跟着转动。

    /*
        知识点:
            摆线转过的角度等于长方体自身旋转的角度
            已知angle,求x,y
    */


    var canvas,contxt;
    canvas=document.getElementById('myCanvas');
    contxt=canvas.getContext("2d");

    var drawWall=function(){
        contxt.save();
        contxt.strokeStyle="#000";
        contxt.lineWidth=5;
        contxt.beginPath();
        contxt.moveTo(100,0);
        contxt.lineTo(500,0)
        contxt.stroke();
        contxt.closePath();
        contxt.restore();   
    };
    var drawLine=function(x,y){
        contxt.save();
        contxt.strokeStyle="#000";
        contxt.lineWidth=2;
        contxt.beginPath();
        contxt.moveTo(300,0);
        contxt.lineTo(300+x,y)
        contxt.stroke();
        contxt.closePath();
        contxt.restore();       
    };
    var drawRect=function(x,y,angle){
        contxt.save();
        contxt.fillStyle="#f00";
        contxt.translate(300+x,y);
        contxt.rotate(angle+Math.PI/2);
        contxt.rect(-100,-50,200,100);
        contxt.fill();
        contxt.restore();

    };

    var angle,increase,width,height,x,y,radius;
    angle=Math.PI/3;
    increase=Math.PI/3/200;
    width=200;
    height=100;
    radius=300;

    var onframe=function(){
        contxt.clearRect(0,0,800,600);
        drawWall();
        x=radius*Math.cos(angle);
        y=radius*Math.sin(angle);   
        drawLine(x,y);
        drawRect(x,y,angle);

        if(angle>(Math.PI/3*2)){
            increase=-increase;
        }else if(angle<Math.PI/3){
            increase=-increase;
        }
        angle+=increase;
        window.requestAnimationFrame(onframe);
    };
    onframe();
0
0
查看评论

atan函数与atan2函数的一点区别

atan 和 atan2 都是求反正切函数,如:有两个点 point(x1,y1), 和 point(x2,y2); 那么这两个点形成的斜率的角度计算方法分别是: float angle = atan( (y2-y1)/(x2-x1) ); 或 float angle =
  • chinabinlang
  • chinabinlang
  • 2011-09-23 09:16
  • 64347

[转]纯C实现sqrt,cos,sin,atan2

一开始的想法就是cos,sin,atan2都可以使用泰勒级数,sqrt可以使用牛顿法。 然后。。。上网找资料。。。 首先是SQRT,这位仁兄基本思路和我一样,但是他在最后提供的这段代码的确很神奇。列在下面。 [cpp] view plain copy print? ...
  • linmin418
  • linmin418
  • 2016-12-14 17:08
  • 711

JS Math.sin() 与 Math.cos() 用法(画圆)

Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间; Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数; 这两个函数中的X 都是...
  • u010227447
  • u010227447
  • 2015-05-21 15:36
  • 2292

基于Opencv的矩阵三角函数封装 cvAtan2Mat cvSinMat cvAtan2Mat功能等于matlab里的atan2 sin cos

Opencv中没有提供对矩阵进行操作的三角函数,我封装了三个,其他三角函数可以仿照此进行封装。  头文件中要包含 #include CvMat* cvAtan2Mat(CvMat *a, CvMat *b) {     int rows = a-&g...
  • yanzi1225627
  • yanzi1225627
  • 2012-05-16 17:39
  • 5835

数学基础知识之Sin、cos画圆

由于在空中台里面画圆的时候,SetCursorPosition该函数只接受Int类型的数据  所以位置就会四舍五入,这样就画的不正确  所以采用Uniyt中的2D界面绘制的 主要是巩固math.sin和math.cos函数 void DrawCircle() { ...
  • Rose_Girls
  • Rose_Girls
  • 2016-07-13 12:27
  • 1440

java 反射 画Sin、Cos函数曲线

package test;import java.lang.reflect.Field;import java.lang.reflect.InvocationTargetException;import java.lang.reflect.Method;public class Test3 { St...
  • zhengjianqi
  • zhengjianqi
  • 2008-07-09 17:22
  • 4536

求一个角度的sin,cos值的demo

package iodemo; //求一个角度的sin cos值 public class AngleDemo {      static  int averageAngle = 3; static double[] sin; static doub...
  • ChouYaChouJi
  • ChouYaChouJi
  • 2013-10-31 17:44
  • 1623

atan2数学函数应用实例

atan2(y,x)是表示X-Y平面上所对应的(x,y)坐标的角度,它的值域范围是(-Pi,Pi) 用数学表示就是:atan2(y,x)=arg(y/x)-Pi  当y  当y>0时,其值为正.  原型:extern float ...
  • kongshuai19900505
  • kongshuai19900505
  • 2016-05-06 20:23
  • 772

JAVA问题总结之7--Pow、sin、sqrt、abs等常用数学函数调用

JAVA问题总结之7--Pow、sin、sqrt、abs等常用数学函数调用 常用的使用方法: Math.sin(0) //返回0.0,这是double类型的值 Math.cos(0) //返回1.0 Math.tan(0.5) //返回0.5463024898437905 Ma...
  • bob601450868
  • bob601450868
  • 2015-08-25 16:57
  • 1458

sin cos tan cot公式

<br />在直角三角形中 <br /> sin@代表对边比斜边 <br /> cos@代表邻边比斜边 <br /> tan@代表对边比邻边 <br /> cot@代表邻边比对边 <br /><br /><br...
  • zalion
  • zalion
  • 2011-04-21 16:56
  • 13048
    个人资料
    • 访问:45405次
    • 积分:1009
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条