用JavaScript实现使用鼠标画线的示例代码


Posted in Javascript onAugust 19, 2014
<!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=utf-8" /> 
<title>Untitled 1</title> 
<style type="text/css"> 
.style1 { 
  font-size: x-small; 
} 
</style> 
<script type="text/javascript"> 
/**
  画点
*/  
function makedot(x, y){ 
 pointDiv = "<div style='height:1px;position:absolute;left:" + x +
   "px;top:" + y + "px;width:1px;background:#f00;overflow:hidden'></div>"; 
 return pointDiv;
} 
/** 
 根据两点坐标画直线。 
*/ 

function line(x1,y1,x2,y2){ 
 var slope; //斜率
 var direction;//坐标运动方向
 var tx = x2 - x1;
 var ty = y2 - y1;
 if(tx == 0 && ty == 0)return;
 var points = "";
 var axis;//坐标轴上的坐标
 if(Math.abs(tx) >= Math.abs(ty)){//在x轴上移动
   direction = tx > 0 ? 1 : -1;
   tx = Math.abs(tx);
   slope = ty / tx;
   axis = x1;
   for(i = 0; i < tx; i ++){
     points += makedot(axis, y1 + i * slope);
     axis += direction;
   }
    
 }else{//在y轴上移动
   direction = ty > 0 ? 1 : -1;
   ty = Math.abs(ty);
   slope = tx / ty; 
   axis = y1;  
   for(i = 0; i < ty; i ++){
     points += makedot(x1 + i * slope, axis);
     axis += direction;
   }
 }
 var container = document.getElementById("container");
 container.innerHTML += points; 
} 
var oldPoint = null;
//获取鼠标位置
function mousePosition(ev){
  ev = ev || window.event;
  if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
  }
  var doc = document.documentElement, body = document.body;
  var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
  var pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);    
  return {x:pageX, y:pageY};
}

function recordPoint(ev){
  
  var point = mousePosition(ev);
  if(oldPoint != null){
    line(oldPoint.x, oldPoint.y, point.x, point.y);
  }
  oldPoint = point;
}
</script>
</head> 

<body> 
<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onclick="recordPoint(event);">
  
</div>
<script type="text/javascript"> 
  //line(19,19,22,300); 
</script>
</body> 
</html>
Javascript 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js 函数的副作用分析
Aug 23 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
VUE安装使用教程详解
Jun 03 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 #Javascript
js选择并转移导航菜单示例代码
Aug 19 #Javascript
js遍历子节点子元素附属性及方法
Aug 19 #Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 #Javascript
用循环或if语句从json中取数据示例
Aug 18 #Javascript
通过jquery 获取URL参数并进行转码
Aug 18 #Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
关于vue面试题汇总
2018/03/20 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
element ui table 增加筛选的方法示例
2018/11/02 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
python str与repr的区别
2013/03/23 Python
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
python实现bitmap数据结构详解
2014/02/17 Python
python字典的常用操作方法小结
2016/05/16 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
培训主管岗位职责
2014/02/01 职场文书
《悯农》教学反思
2014/04/28 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
教师党员承诺书2015
2015/01/21 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Python基础详解之邮件处理
2021/04/28 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android