找到点和圆Canvas之间的切线

好吧，有些我的三角学有点生疏了。

基本上我正试图在canvas上做一些聚光灯。 我试图保持9度角，这就是为什么这有点棘手。 到目前为止，这是我的小提琴。

http://jsfiddle.net/uq8fe/

it's a bit long please refer to the fiddle /\ 

非常接近，但我需要圆上的切点，所以我可以在这两个点和鼠标之间绘制一个三角形，所以我看起来像一个很好的光滑光束。

http://en.wikipedia.org/wiki/File:Inscribed_angle_theorem4.svg

以上基本上是我需要实现的图表和公式。 我需要点T和S.我希望这是有道理的。

Answer 1

这是计算切线的代码： Demo

  //Calculate Tangents var pointDistance = { x: beamCenter.x - mousePos.x, y: beamCenter.y - mousePos.y, length: function () { return Math.sqrt(this.x * this.x + this.y * this.y) } } var radius = getDist(p1.x, p1.y, p2.x, p2.y) / 2; //Alpha var a = Math.asin(radius / pointDistance.length()); //Beta var b = Math.atan2(pointDistance.y, pointDistance.x); //Tangent angle var t = b - a; //Tangent points var T1 = { x: beamCenter.x + radius * Math.sin(t), y: beamCenter.y + radius * -Math.cos(t) }; t = b + a; var T2 = { x: beamCenter.x + radius * -Math.sin(t), y: beamCenter.y + radius * Math.cos(t) }