Heim > Artikel > Web-Frontend > js-Methode zum Zeichnen einer Linie zwischen zwei Punkten_Javascript-Fähigkeiten

js-Methode zum Zeichnen einer Linie zwischen zwei Punkten_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:59:432374Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Zeichnen einer Linie zwischen zwei Punkten in js. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Mir war in letzter Zeit etwas langweilig. Ich habe lange darüber nachgedacht und kam auf die Idee, die Zeit totzuschlagen, nämlich eine js-Version von Lianliankan zu erstellen.

Das Zeichnen einer Linie zwischen zwei Punkten ist nur ein Teil der grundlegendsten Funktion von Lianliankan, daher ist die Linie, die ich gezeichnet habe, nur eine Polylinie und kann nur nach links gefaltet werden. Später wird die Richtung der Polylinie bestimmt zur Position des Bildes in Lianliankan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两点之间画折线</title>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<script type="text/javascript">
<!--
var dot=new Array();
document.onmousedown =function(a) 
{ 
 //若div存在，则删除
 if(document.getElementById('line_div')){
 var clearDiv=document.getElementById("line_div");
 clearDiv.parentNode.removeChild(clearDiv);
 }
 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 //当数组长度大于等于4时，清空数组
 if(dot.length>=4) dot.splice(0,4);
 //将x、y添加到数组中,数组中保存了两组坐标值，相当于页面上的A(x1,y1)、B(x2,y2)两点
 dot.push(x,y);
 //当数组长度为4时，画线。
 if(dot.length==4){
 //计算div的长和宽
 var width=Math.abs(dot[0]-dot[2]);
 var height=Math.abs(dot[1]-dot[3]);
 //在页面上定位div左上角的具体位置
 var left=dot[0]-dot[2]<0&#63;dot[0]:dot[2];
 var top=dot[1]-dot[3]<0&#63;dot[1]:dot[3];
 //创建div
 var div=document.createElement("div");
 div.innerHTML=' <div id="line_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>';
 document.body.appendChild(div);
 }
} 
-->
</script>
<body>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Methode, um eine langsame Kontraktion und Erweiterung der div-layer_javascript-Fähigkeiten zu erreichenNächster Artikel：js-Methode, um eine langsame Kontraktion und Erweiterung der div-layer_javascript-Fähigkeiten zu erreichen

In Verbindung stehende Artikel

Mehr sehen