如何计算圆形路径上的点？ （中心已知）

Question

我目前正在开发一个小型HTML画布游戏（画布的左上角为零点）。我需要一个圆上的坐标（X，Y）。

半径和中心是已知的。

我的变量：

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

Answer 1

在给定角度的情况下，圆上一点的公式为：

x = x _center + 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>