js實(shí)現(xiàn)兩點(diǎn)之間畫(huà)線(xiàn)的方法
更新時(shí)間：2015年05月12日 12:34:53 作者：vivi
這篇文章主要介紹了js實(shí)現(xiàn)兩點(diǎn)之間畫(huà)線(xiàn)的方法,涉及javascript圖形繪制的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)兩點(diǎn)之間畫(huà)線(xiàn)的方法。分享給大家供大家參考。具體分析如下：
最近有點(diǎn)無(wú)聊，琢磨了很久，想到了一消磨時(shí)間的點(diǎn)子，也就是做js版的連連看。
兩點(diǎn)之間畫(huà)線(xiàn)也只是連連看最基本功能的一部分，所以我畫(huà)的線(xiàn)也僅是折線(xiàn)，而且還只能向左折，后面將根據(jù)連連看中圖片位置點(diǎn)來(lái)確定折線(xiàn)的方向。
<!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>兩點(diǎn)之間畫(huà)折線(xiàn)</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);
}
//按下時(shí)創(chuàng)建一個(gè)事件
if(!a) a=window.event;
//獲取x軸、y軸坐標(biāo)
var x=a.clientX;
var y=a.clientY;
//當(dāng)數(shù)組長(zhǎng)度大于等于4時(shí)，清空數(shù)組
if(dot.length>=4) dot.splice(0,4);
//將x、y添加到數(shù)組中,數(shù)組中保存了兩組坐標(biāo)值，相當(dāng)于頁(yè)面上的A(x1,y1)、B(x2,y2)兩點(diǎn)
dot.push(x,y);
//當(dāng)數(shù)組長(zhǎng)度為4時(shí)，畫(huà)線(xiàn)。
if(dot.length==4){
//計(jì)算div的長(zhǎng)和寬
var width=Math.abs(dot[0]-dot[2]);
var height=Math.abs(dot[1]-dot[3]);
//在頁(yè)面上定位div左上角的具體位置
var left=dot[0]-dot[2]<0?dot[0]:dot[2];
var top=dot[1]-dot[3]<0?dot[1]:dot[3];
//創(chuàng)建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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
用innerhtml提高頁(yè)面打開(kāi)速度的方法
這篇文章介紹了用innerhtml提高頁(yè)面打開(kāi)速度的方法，有需要的朋友可以參考一下2013-08-08
微信小程序 wx:for遍歷循環(huán)使用實(shí)例解析
這篇文章主要介紹了微信小程序 wx:for遍歷循環(huán)使用實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript生成指定范圍的時(shí)間列表思路詳解,需要的朋友可以參考下2018-03-03
本文主要介紹了js怎么判斷是否是數(shù)組的六種方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
ymPrompt的doHandler方法來(lái)實(shí)現(xiàn)獲取子窗口返回值的方法
今天在寫(xiě)頁(yè)面時(shí)用到了ymPrompt的win方法來(lái)彈出一個(gè)窗口。由于要用到獲取子窗口返回來(lái)的值判斷是否刷新父窗口,在ymPrompt的組件Demo中一直沒(méi)有找到合適的方法實(shí)現(xiàn)2010-06-06
今天小編就為大家分享一篇layui 表格的屬性的顯示轉(zhuǎn)換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JavaScript 語(yǔ)句之常用 for 循環(huán)詳解
這篇文章主要介紹了JavaScript 語(yǔ)句之常用 for 循環(huán)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
本文將詳細(xì)介紹利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下2012-11-11
JavaScript中關(guān)聯(lián)原型鏈屬性特性
這篇文章主要介紹了JavaScript中關(guān)聯(lián)原型鏈屬性特性的相關(guān)資料,需要的朋友可以參考下2016-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03