javascript - 如何按度数更改对象的 x 和 y 坐标？

Question

我正在用 HTML5 为我的画布处理一些坐标函数，我想制作一个可以按度移动对象的函数。
我的梦想是制作一个像这样工作的函数：

box.x=10;
box.y=10;
// now the box has the coordinates (10,10)
moveTheBoxWithThisAmountOfDistance=10;
degreesToMoveTheBox=90;
box.moveByDegrees(moveTheBoxWithThisAmountOfDistance,degreesToMoveTheBox);
// now the box.x would be 20 and box.y wouldn't be changed because
// we only move it to the right (directional 90 degrees)

我希望这有任何意义！
所以我的问题是：
当我必须将度数转换为坐标时，数学表达式如何？

Answer 1

使用sinandcos将角度和距离转换为坐标：

function moveByDegrees(distance, angle) {
  var rad = angle * Math.pi / 180;
  this.x += Math.cos(rad) * distance;
  this.y += Math.sin(rad) * distance;
}

Answer 2

就是这样：http ://en.wikipedia.org/wiki/Rotation_matrix ，所有的数学都被描述了:)

另请注意，如果您需要多次连续旋转（即您进行连续动画），最好从初始值重新计算 x' 和 y' 而不仅仅是以前的值。不这样做会导致舍入误差累积，并且经过数千次旋转后，结果会变得过于粗糙。