[canvas] 坐标旋转

坐标旋转

做圆周运动

vr = 0.1
angle = 0
radius = 100
centerX = 0
centerY = 0
   
   object.x = centerX + Math.sin(angle)*radius
   object.y = centerY + Math.cos(angle)*radius
   angle += vr

只知道中心点(center point)和物体的位置

var dx = objext.x - center.x,
	dy = object.y - center.y,
    angle = Math.atan2(dy, dx),
    radius = Math.sqrt(dx*dx + dy*dy);
	

只有物体的x,y坐标，和每一帧物体旋转的角度。

newX = x * cos(rotation) - y * sin(rotation);
newY = y * cos(rotation) + x * sin(rotation);

推导过程一：

//物体的原始位置，距离中心点的距离radius
x = radius * cos(angle);
y = radius * sin(angle);

newX = radius * cos(angle + rotation);
newY = raidus * sin(angle + rotation);

推导过程二：

//已知公式
cos(a + b) = cos(a) * cos(b) - sin(a) * sin(b);
sin(a + b) = sin(a) * cos(b) + cos(a) * sin(b);

推导过程三：

//所以可以化简成这种形式
newX = radius * cos(angle) * cos(rotation) - raidus * sin(angle) * sin(rotation);
newY = raidus * sin(angle) * cos(rotation) + raidus * cos(angle) * sin(rotation);

推导过程四：

//又因为 x = radius*cos(angle); y = radius*sin(angle); 将其代入得

newX = x * cos(rotation) - y * sin(rotation);
newY = y * cos(rotation) + x * sin(rotation);

如果设置了一个中心点，有物体的x,y坐标，和每一帧物体旋转的角度

newX = (x - centerX) * cos(rotation) - (y - centerY) * sin(rotation);
newY = (y - centerY) * cos(rotation) + (x - centerX) * sin(rotation);