canvas三角函数应用

这个是圆圈旋转的简单案例

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

function fil(){
a+=0.05;
cxt.clearRect(0,0,canvas.width,canvas.height)
cxt.fillStyle="red";
cxt.beginPath();
cxt.arc((Math.sin(a)+1)*20+50,(Math.cos(a)+1)*20+50,10,0,Math.PI*2,true);
cxt.fill()
cxt.closePath();
requestAnimationFrame(fil);
}

fil();

下面是三角函数的6种用法

（1）角度与弧度互转

radians = degrees * Math.PI /180

degrees = radians * 180 / Math.PI

（2）旋转（弧度）

dx = point.x - object.x;

dy = point.y - object.y;

boject.rotation = Math.atan2(dy, dx);

（3）平滑运动

value = center + Math.sin(angle) * range;

angle += speed;

（4）圆形运动

xposition = centerX + Math.cos(angle) * radius;

yposition = centerY + Math.sin(angle) * radius;

angle += speed;

（5）椭圆运动

xposition = centerX + Math.cos(angle) * radiusX;

yposition = centerY + Math.sin(angle) * radiusY;

angle += speed;

（6）两点间的距离

var dx = x2 - x1;

var dy = y2 - y1;

var dist = Math.sqrt(dx * dx + dy * dy);