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

Question

我在 html canvas 上画了一个圆圈，这个圆圈是用来表示 "ship"。

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

即船目前为 100/100（canvas）。我确定学位为30，数量为50。

现在我想根据 0 度表示 "straight up" 和 180 度表示笔直向下而 50 度表示向确定的方向移动 50 个像素的假设来获取船舶的新位置。

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

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

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

Answer 1

你说得对。您必须将度数转换为弧度 (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;

Answer 2

是的，JavaScript 中的所有角度都以弧度为单位。另外，canvas上下文有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>

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

How to alter a degree value into an actual x/y position change?

javascript

canvas

radians