HTML5の円上の象限のエッジポイントの式は何ですか？

Question

HTML5キャンバスでスポットライトをアニメートしようとしています。私がそれを見せたいのはこれです：

私は赤で2つのポイントを見つけることに固執しています。かなり単純に、私はポイントの一つのための方程式はだろうと思った：

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

これは比較的単純な形状です。あなたは円の接線を描こうとしています。したがって、あなたは、原点、円の中心、および円周との交差点からなる直角三角形を形成しています。この三角形の2つの辺の長さ（半径と原点からの距離）を知っているので、いくつかの基本的な三角法で交差点の座標を求める必要があります。