根据html5画布上的度数查找圆外边缘的x，y坐标

Question

我的画布上有一个圆圈，我试图根据任何给定的度数从中心到外边缘画一条线。我的圆心位于 (110, 115) 处，半径为 100。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(110, 150, 100, 0, 2*Math.PI); //Circle

我正在使用 PHP 获取输入并使用它进行计算

$x = 110 + 100 * cos($degrees);
$y = 150 + 100 * sin($degrees);

这将始终将线的末端放在圆的外边缘，但不会将它放在圆上的正确位置。

我为 $degrees 输入了 90，这条线应该向右直行，但改为向下和向左。

我搜索了高低，但没有找到任何人试图在画布中这样做。我做错了什么？

编辑：

我把我的计算改为

$x = 110 + 100 * cos($degrees*pi()/180);
$y = 150 + 100 * sin($degrees*pi()/180);

它将右中心边缘视为 0 度，但我希望 0 位于顶部。

Answer 1

画布中的90°是直下的，而0°是正确的，所以你必须对此进行补偿。

要使 0° 向上，只需交换 cos 和 sin 并减去 y：

$x = 110 + 100 * sin($degrees * 3.14159 / 180);
$y = 150 - 100 * cos($degrees * 3.14159 / 180);

var ctx = document.querySelector("canvas").getContext("2d");
var cx = 75, cy = 75, angle = 90;

var x = cx + 75 * Math.sin(angle * Math.PI / 180);
var y = cy - 75 * Math.cos(angle * Math.PI / 180);

ctx.arc(cx, cy, 74, 0, Math.PI*2);
ctx.moveTo(cx, cy);
ctx.lineTo(x, y);
ctx.stroke();

<canvas/>