js untuk melukis garisan antara dua kemahiran point

js untuk melukis garisan antara dua kemahiran point_javascript

WBOY

Lepaskan： 2016-05-16 15:59:43

asal

2398 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah melukis garisan antara dua titik dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Saya agak bosan kebelakangan ini, saya telah memikirkannya untuk masa yang lama dan mendapat idea untuk menghabiskan masa, iaitu membuat versi js Lianliankan.

Melukis garisan di antara dua titik hanyalah sebahagian daripada fungsi Lianliankan yang paling asas, jadi garisan yang saya lukis hanyalah garisan poli, dan ia hanya boleh dilipat ke kiri Kemudian, arah garisan akan ditentukan berdasarkan pada kedudukan gambar di 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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.