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

您使用sin和cos将角度和距离转换为坐标：

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'，而不仅仅是前一次。不这样做会导致舍入错误累积，并且在几千次旋转之后结果将变得太粗糙。

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

2 个答案: