This article describes the method of drawing lines between two points by JS. Share it for your reference. The specific analysis is as follows:
I've been a little bored recently. I have been thinking about it for a long time and thought of the idea of spending time, which is to make the JS version of Lianlian.
Drawing lines between two points is only part of Lianlian's most basic function, so the lines I draw are only polylines, and they can only fold to the left. The direction of the polyline will be determined based on the position points of Lianlian's image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Draw a fold line between two points</title>
<style type="text/css">
body{
font-size:12px;
}
</style>
</head>
<script type="text/javascript">
<!--
var dot=new Array();
=function(a)
{
//If the div exists, delete it if(('line_div')){
var clearDiv=("line_div");
(clearDiv);
}
//Create an event when pressed if(!a) a=;
//Get x-axis and y-axis coordinates var x=;
var y=;
//When the array length is greater than or equal to 4, clear the array if(>=4) (0,4);
//Add x and y to the array, and two sets of coordinate values are saved in the array, which are equivalent to two points A(x1, y1) and B(x2, y2) on the page. (x,y);
//Draw the line when the length of the array is 4. if(==4){
// Calculate the length and width of the div var width=(dot[0]-dot[2]);
var height=(dot[1]-dot[3]);
//Position the specific position of the upper left corner of the div on the page var left=dot[0]-dot[2]<0?dot[0]:dot[2];
var top=dot[1]-dot[3]<0?dot[1]:dot[3];
//Create a div var div=("div");
=' <div style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>';
(div);
}
}
-->
</script>
<body>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.