Как я могу рассчитать точки на круговой траектории? (Центр известен)

Question

В настоящее время я работаю над небольшой HTML-игрой с холстом (нулевая точка холста вверху слева). Мне нужны координаты (X, Y) на окружности.

Радиус и центр известны.

Мои переменные:

var radius = 50;
var center_x = 200;
var center_y = 200;
var angle = 45;

Answer 1

Формула для точки на окружности с учетом угла:

x = x _центр + r · cos (?)
y = y _center + r · sin (?)

... где ? - угол в радианах.

Поскольку на веб-странице координата Y направлена ​​вниз, вы должны вычесть терминв формуле.

Вот демонстрация, где угол постоянно меняется:

var radius = 50;
var center_x = 100;
var center_y = 100;
var angle = 50; // Will change in this demo

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const span = document.querySelector("span");
const loop = () => {
    angle = (angle + 1) % 360;

    // Formula:
    var rad = angle * Math.PI / 180;
    var x = center_x + radius * Math.cos(rad);
    var y = center_y - radius * Math.sin(rad);

    // Draw point
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#ff2626";
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, Math.PI * 2, true);
    ctx.fill();
    
    // Display angle
    span.textContent = angle;

    // Repeat at next paint cycle
    requestAnimationFrame(loop);
};
loop();

<div>Angle: <span></span></div>
<canvas width=500 height=160></canvas>