Найти координаты x, y по внешнему краю круга на основе градусов на холсте html5
У меня есть круг на холсте, и я пытаюсь нарисовать линию от центра к внешнему краю, основываясь на любой степени. Центр моего круга расположен в точке (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);
Это всегда помещает конец линии на внешний край круга, но не помещает его в нужное место на круге.
Я ввел 90 для $ градусов, и линия должна идти прямо вправо, но вместо этого идет вниз и влево.
круг http://oi60.tinypic.com/10i80v6.jpg
Я искал высоко и низко, но не нашел никого, кто пытался сделать это на холсте. Что я делаю неправильно?
Редактировать:
Я изменил свои расчеты на
$x = 110 + 100 * cos($degrees*pi()/180);
$y = 150 + 100 * sin($degrees*pi()/180);
и он обрабатывает правый центральный край как 0 градусов, но я бы хотел, чтобы 0 был сверху.
Решение
90 ° на холсте — это прямо вниз, а 0 ° — вправо, так что вы должны это компенсировать.
Чтобы получить 0 °, просто поменяйте местами соз а также грех и вычесть для 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/>Другие решения
Других решений пока нет …
detector