Javascript 交叉点后延长线_Javascript_Jquery_Html_Canvas

Javascript 交叉点后延长线

javascript jquery html canvas

Javascript 交叉点后延长线,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我有两条线，我需要用数学公式延长相交后的线，请帮助我 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:0px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script>

我有两条线，我需要用数学公式延长相交后的线，请帮助我

 <!DOCTYPE html>
 <html>
 <body>
 <canvas id="myCanvas" width="200" height="100" style="border:0px solid #d3d3d3;">
 Your browser does not support the HTML5 canvas tag.</canvas>
 <script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.moveTo(0,0);
 ctx.lineTo(200,100);
 ctx.moveTo(0,100);
 ctx.lineTo(200,100);
 ctx.stroke();
 </script>
 </body>
 </html>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.moveTo（0100）；
ctx.lineTo（200100）；
ctx.stroke（）；

假设你有一个由三个点定义的三角形：

a = {x:10, y:20}
b = {x:60, y:70}
c = {x:99, y:30}

这是如何绘制它的：

ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.lineTo(c.x, c.y);
ctx.stroke()
ctx.closePath();

现在让我们把两边都展开。第一行由下式给出：

slope1 = (a.y - b.y) / (a.x - b.x)
intercept1 = b.y - (slope1 * b.x)

同样，第二个：

slope2 = (c.y - b.y) / (c.x - b.x)
intercept2 = b.y - (slope2 * b.x)

选择交点另一侧的端点：

if(!Number.isFinite(slope1)) end1 = {x:b.x, y:b.y*2-a.y}
else if(!slope1)             end1 = {x:b.x*2-a.x, y:b.y}
else                         end1 = {x:b.x*2-a.x, y:(b.x*2-a.x)*slope1+intercept1 }

if(!Number.isFinite(slope2)) end2 = {x:b.x, y:b.y*2-c.y}
else if(!slope2)             end2 = {x:b.x*2-c.x, y:b.y}
else                         end2 = {x:b.x*2-c.x, y:(b.x*2-c.x)*slope2+intercept2 }

并绘制扩展：

ctx.beginPath();
ctx.setStrokeColor('red');
ctx.moveTo(b.x, b.y);
ctx.lineTo(end1.x, end1.y);
ctx.moveTo(b.x, b.y);
ctx.lineTo(end1.x, end1.y);
ctx.stroke();
ctx.closePath();

你的画布需要更大一些

<canvas id="myCanvas" width="400" height="400" style="border:0px solid #d3d3d3;">

这是一把小提琴：

我听不懂你的问题。你的问题是什么？看到这把小提琴了吗？我有两条像这样的线，我想从端点延伸两条线。从什么延伸到什么？你能添加一个草图来显示你想要的吗。在这种情况下。我需要一个共同的方式，它从任何地方，任何角度。非常感谢男人。。。它工作得很好。我无话可说。谢谢你，伙计。感谢我们有时它会显示以下值。end2*slope2+intercept2，slope2，intercept2:NaN，-无穷大，无穷大。在这种情况下，一条线没有画出来。参见上图，一条线没有画出来。@v.ArunKumar：是的，我的错误-垂直线没有坡度。。。见update.k。在本例中，jsfiddle.net/K549H/3。我需要一个共同的方式，它形成任何地方，任何角度。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 ctx.moveTo(0,0);
 ctx.lineTo(400,200);
 ctx.moveTo(0,100);
 ctx.lineTo(400,100);
 ctx.stroke();