Rumah > Artikel > hujung hadapan web > js untuk melukis garisan antara dua kemahiran point_javascript

js untuk melukis garisan antara dua kemahiran point_javascript

WBOYasal: 2016-05-16 15:59:432362semak imbas

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js untuk mencapai pengecutan perlahan dan pengembangan kemahiran div layer_javascriptArtikel seterusnya：js untuk mencapai pengecutan perlahan dan pengembangan kemahiran div layer_javascript

Artikel berkaitan

Lihat lagi