一、三角函数
正弦函数,余弦函数,反正切函数(Math.atan2(y,x))用的较为频繁;
反正弦函数,反余弦函数,用的较少,但是肯定有存在的意义
Math.atan2(y,x)一般用来计算角度的大小;如果用 Math.atan(y,x)进行计算的时候不能够准确的进行区分,会返回很多相同的角
//避免在动画代码中出现具体数字,以免不容易进行修改:将数字从代码中剥离出来,首选放在文件的开头,就很容易找到所需要的变量
平滑的上下运动或者前后移动,,可以通过Math.sin(angle)进行,利用requestAnimationFrame(function(),canvas);进行在设置好的时间间隔内不断清空canvas并绘制新的帧\
正弦值的用途
1.用于改变对象的坐标,从而实现一些简单的动画,,海葵的漂浮、漂浮物的移动等;
2.还可以应用于对象的其他属性,example:使用正弦值改变球形的比列,从而制造出脉冲的效果
正弦波可以用于各种不同属性当中,实现各种各样的视觉效果
使用两个角产生波:两个角,为他们设置不同的值,两个属性,每个属性赋予不同的变化
余弦波:余弦波的波形本质上与正弦波的波形是一模一样的,只是在x轴上产生一些偏移;
2.1.1如果只需要获得一个物体的振荡运动,那么正弦 余弦都可以,但是两者的结合会获得一个更常用并且更有价值的功能:让物体做圆周运动。
inportant:物体做圆周运动的运动范围就是圆的半径[-radius,radius];
// x= Math.cos(angle)*radius; y= Math.sin(angle)*radius;
使用正弦函数获得y坐标,余弦函数获得x坐标//非常重要的一个关系
其实不管是椭圆运动还是圆周运动,不变的是x,y轴的变化范围,椭圆运动可以设置不同的半径
x=Math.cos(angle)*radiusX; y = Maht.sin(angle)*radiusY;
勾股定理、两点之间的距离:
var deltax=x2-x1, deltay=y2-y1;
var dis=Math.sqrt(deltax*deltax+deltay*deltay);
小结:第三章 三角学中的开发工具:
1.角度与弧度之间的相互转化
radians = degrees * Math.PI / 180 ;
degrees = radians * 180 / Math.PI ;
2.朝鼠标方向(角度)(或者任意一点)进行旋转(跟着鼠标进行移动)
dx = mouse.x - object.x;
dy = mouse.y - object.y;
object.rotation=Math.atan2(dy,dx)*180/Math.PI;
3.创建圆形
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
xpos=canvas.width/2+Math.cos(angle)*radius;
ypos=canvas.height/2+Math.sin(angle)*radius;
angle+=speed;
}());
4.创建椭圆形
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
xpos=canvas.width/2+Math.cos(angle)*radiusX;
ypos=canvas.height/2+Math.sin(angle)*radiusY;
angle+=speed;
}());
5.创建波
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
value=canvas.width/2+Math.sin(angle)*range;
angle+=speed;
}());
6.获得两点间的距离
var deltax=x2-x1,
deltay=y2-y1;
var dis=Math.sqrt(deltax*deltax+deltay*deltay);
二、渲染技术
后继渲染技术会继续写。。