如何将度数值更改为实际的 x/y 位置变化？

Question

我在 html 画布上画了一个圆圈，圆圈是为了表示“船”。

我有“Ship”对象的当前位置（x，y）并随机确定一个度数（0到360）和一个数量值。 然后我想通过程度和数量来改变船的当前位置。

即船目前为 100/100（在画布上）。 我确定度数为30，数量为50。

现在我想基于以下假设获得船舶的新位置：0 度表示“笔直向上”，180 度表示笔直向下，而 50 度表示向确定的方向移动 50 像素。

我知道这与弧度有关，但不幸的是我无法进一步解决它。

var ship = {
  x: 100,
  y: 100
}

var movement = {
  degrees: 30,
  amount: 50
}

Answer 1

是的，JavaScript 中的所有角度都以弧度表示。此外，画布上下文有 0° 指向右侧，因此如果您希望 0° 直上，则需要从所有角度减去 90°：

var angle = (movement.degrees - 90) / 180 * Math.PI;  // compensate angle -90°, conv. to rad
ship.x += movement.amount * Math.cos(angle);          // move ship
ship.y += movement.amount * Math.sin(angle);

var movement = {
  degrees: 30,
  amount: 50
}

var ctx = document.querySelector("canvas").getContext("2d");

(function loop() {
  ctx.clearRect(0, 0, 300, 150);

  var ship = {  // reset ship position for demo
    x: 100,
    y: 90
  }

  ctx.strokeRect(ship.x - 2, ship.y - 2, 4, 4);
  ctx.fillText("From", ship.x + 5, ship.y);

  var angle = (movement.degrees - 90) / 180 * Math.PI; // compensate angle -90°, conv. to rad
  ship.x += movement.amount * Math.cos(angle); // move ship
  ship.y += movement.amount * Math.sin(angle);

  ctx.strokeRect(ship.x - 2, ship.y - 2, 4, 4);
  ctx.fillText(movement.degrees + "°", ship.x + 5, ship.y);
  
  movement.degrees++;
  movement.degrees = movement.degrees % 360;
  requestAnimationFrame(loop);
})();

<canvas></canvas>

Answer 2

你是对的。您必须将度数转换为弧度 (1 degree = PI/180)，然后计算适当的正弦和余弦。

var angle = degrees * Math.PI / 180;
var dx = Math.cos(angle) * amount;
var dy = Math.sin(angle) * amount;
x += dx;
y += dy;