js实现两点之间画线的方法


Posted in Javascript onMay 12, 2015

本文实例讲述了js实现两点之间画线的方法。分享给大家供大家参考。具体分析如下:

最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看。

两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向。

<!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?dot[0]:dot[2];
 var top=dot[1]-dot[3]<0?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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery简单实现图片切换效果的方法
May 12 #Javascript
浅谈javascript的分号的使用
May 12 #Javascript
JS中Location使用详解
May 12 #Javascript
js获取微信版本号的方法
May 12 #Javascript
javascript中基本类型和引用类型的区别分析
May 12 #Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 #Javascript
Javascript中typeof 用法小结
May 12 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
JavaScript的Cookies
2008/01/16 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python 反向输出字符串的方法
2018/07/16 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
QML用PathView实现轮播图
2020/06/03 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
体育教师个人总结
2015/02/09 职场文书
我是特种兵观后感
2015/06/11 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS