Каково уравнение точек ребра на квадранте на окружности в HTML5?

Question

Я пытаюсь оживить прожектор на холсте HTML5.Я хочу, чтобы это выглядело так:

Я застрял в поиске двух точек красного цвета.Довольно наивно я думал, что уравнение для одной из точек будет:

x = circleOrigin.x + circle.radius/2; y = circleOrigin.y + circle.radius/2;

Но когда я перемещаю круг, линии перекрывают круг.Есть ли лучшее уравнение для этих точек?

Answer 1

Я думал, что один из ответов был правильным, но недостаточно подробным:

Нахождение длины между точками:

var len = Math.sqrt(Math.pow(circle.x - origin.x, 2) + Math.pow(circle.y - origin.y, 2));

Пересечение точек: var intersectx = circle.x + (radius*(origin.y - circle.y)/len); var intersecty = circle.y + (radius*(circle.x - origin.x)/len);

Answer 2

Это относительно простая геометрия.Вы хотите сформировать касательную к кругу;поэтому вы формируете прямоугольный треугольник, состоящий из начала координат, центра круга и пересечения с окружностью.Вы знаете длину двух сторон этого треугольника (радиус и расстояние от начала координат), поэтому некоторая базовая тригонометрия должна дать вам координаты точки пересечения.