js intersection coordinates of two straight lines (which can be automatically extended)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			svg{
				background: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			/ / Dynamically create svg tags, add attributes, and add body
			var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
	        svg.setAttribute("height",'600');
	        svg.setAttribute("width",'600');
	        var body=document.getElementsByTagName('body')[0];
	        body.appendChild(svg);
	        
	        //starting point
	        var begin = []
	        var begins = []
	        //end
	        var last = []
	        var lasts = []
	        //Bind the mouse down event, create a line label at the same time, and add it to svg
	        svg.onmousedown = function(e){
			        var line=document.createElementNS('http://www.w3.org/2000/svg','line');
			        line.style.stroke='black'
			        svg.appendChild(line);
			    //Bind the mouse movement event and add attributes to the line tag
	        	document.onmousemove = function(en){
	        		//add starting point
		        	line.setAttribute("x1",e.offsetX);
		        	line.setAttribute("y1",e.offsetY);
		        	begin = [e.offsetX, e.offsetY]
		        	
		        	//add end point
	        		line.setAttribute("x2",en.offsetX);
	        		line.setAttribute("y2",en.offsetY);
	        		last = [en.offsetX, en.offsetY]
	        	}
	        }
	        / / When the binding mouse is raised, clear the mouse move event
	       	svg.onmouseup = function(e){
	       		document.onmousemove = null	
	       		// all starting points
	       		begins.push(begin)
//	       		console.log(begins)
	       		// all endpoints
	       		lasts.push(last)
//	       		console.log(lasts)
				// start and end cross combination
				var points = []
	       		for(var i = 0 ; i < begins.length; i++){
	       			//String
	       			var line = []
	       			line.push(begins[i],lasts[i])
	       			points.push(line)
	       		}
	       		
	        	
       			var line = []
				line.push(begins[0],lasts[0])
       			points.push(line)
				console.log(points)
				
				//intersection
				var nodes = []
				for(var i = 0;i<points.length-1;i++){
					console.log(points[i+1])
	        		var a={
						x:Number(points[i][0][0]),
						y:Number(points[i][0][1])
					}
					var b={
						x:Number(points[i][1][0]),
						y:Number(points[i][1][1])
					}
					var c={
						x:Number(points[i+1][0][0]),
						y:Number(points[i+1][0][1])
					}
					var d={
						x:Number(points[i+1][1][0]),
						y:Number(points[i+1][1][1])
					}
//					console.log(a,b,c,d)

					function point(a,b,c,d){
						var k0 = (b.y-a.y)/(b.x-a.x)
//						console.log(k0)
						var e = (b.y - k0*b.x)
//						console.log(e)
						var k1 = (d.y-c.y)/(d.x-c.x)
//						console.log(k1)
						var e1 = (dy - k1*dx)
//						console.log(e1)
						var x = (e1-e) / (k0-k1)
						var y = k0 * x + e
						
// console.log('Intersection abscissa'+x)
// console.log('Intersection ordinate'+y)
						
						return {x:(e1-e)/(k0-k1),y:k0*x + e}
					}
					point(a,b,c,d)
					nodes.push(point(a,b,c,d))
	        	}
				console.log(nodes)
				console.log(JSON.stringify(nodes))
	       	}
	        
		</script>
	</body>
</html>
js intersection coordinates of two straight lines (which can be automatically extended)

Guess you like
