Question

我在html画布上绘制一个圆圈，圆圈表示一个＆＃34; ship＆＃34;。

我有＆＃34; Ship＆＃34;的当前位置（x，y）。对象并随机确定度数（0到360）和金额值。然后，我想根据程度和数量改变船舶的当前位置。

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

现在我想基于0度表示＆＃34;直线上升＆＃34;并且180度将指示直线向下，而50度指示50个像素的移动到确定的方向。

我知道它与Radians有关，但遗憾的是我无法进一步解决它。

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;

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

2 个答案: