根据 html5 canvas 上的度数查找圆外边缘的 x、y 坐标

Question

我的 canvas 上有一个圆圈，我试图根据给定的度数从中心到外缘画一条线。我的圆心位于 (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，这条线应该向右直走，但是却向下向左走。

我到处搜索，但在 canvas 中没有发现任何人试图这样做。我做错了什么？

编辑：

我将计算更改为

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

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

Answer 1

canvas中的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/>

根据 html5 canvas 上的度数查找圆外边缘的 x、y 坐标

Find the x, y coordinates on outer edge of a circle based on degrees on html5 canvas

html

php

canvas