Как изменить значение градуса на фактическое изменение положения x/y?

Я рисую круг на холсте html, круг предназначен для обозначения «корабля».

У меня есть текущая позиция (x, y) объекта «Корабль» и случайным образом определяется степень (от 0 до 360) и значение суммы. Затем я хочу изменить текущее положение корабля на степень и величину.

т.е. корабль в настоящее время на 100/100 (на холсте). Я определяю степень как 30 и количество как 50.

Теперь я хотел бы получить новое местоположение кораблей, исходя из предположения, что 0 градусов будет указывать «прямо вверх», а 180 градусов будут указывать прямо вниз, а количество 50 указывает на движение на 50 пикселей в определенном направлении.

Я знаю, что это как-то связано с радианами, но, к сожалению, я не могу решить это дальше.

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

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

javascript canvas radians
person Christian F    schedule 18.06.2015    source источник
comment
Метод, который вы ищете, - это преобразование между полярными и декартовыми координатами.   -  person Sam    schedule 18.06.2015
comment
@Sam Здесь нет полярных координат, просто угол в градусах и расстояние для перемещения   -  person hindmost    schedule 18.06.2015
comment
@hindmost Я не уверен, что понимаю тебя. Почему угол и расстояние не составляют набор полярных координат?   -  person Sam    schedule 18.06.2015

Ответы (2)


arrow_upward
3
arrow_downward

Да, все углы в JavaScript указаны в радианах. Кроме того, контекст холста имеет точку 0° вправо, поэтому вам нужно вычесть 90° из всех углов, если вы хотите, чтобы 0° был прямо вверх:

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>

person Community    schedule 18.06.2015
comment
Чтобы уточнить, вычитание 90 ° необходимо для того, чтобы 0 ° было прямо вверх в соответствии с запросом OP. - person Niddro; 18.06.2015

arrow_upward
1
arrow_downward

Ты прав. Вы должны преобразовать градусы в радианы (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;
person hindmost    schedule 18.06.2015
comment
Просто помните, что 0° в холсте — это вправо, а не вверх. - person ; 18.06.2015