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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
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
php 缓存函数代码
2008/08/27 PHP
PHP 强制下载文件代码
2010/10/24 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python中文字符串截取问题
2015/06/15 Python
python实现基本进制转换的方法
2015/07/11 Python
Python进程间通信之共享内存详解
2017/10/30 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python numpy库np.percentile用法说明
2020/06/08 Python
python dict如何定义
2020/09/02 Python
is_file和file_exists效率比较
2021/03/14 PHP
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
高级护理实习生自荐信
2013/09/28 职场文书
小学体育教学反思
2014/01/31 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
小学生常见病防治方案
2014/06/06 职场文书
好听的队名和口号
2014/06/09 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书