用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的遍历同id元素 并响应事件的代码
Jun 14 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
Vue如何实现响应式系统
Jul 11 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
npm的lock机制解析
Jun 20 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树形菜单代码
2014/11/19 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python代码编写计算器小程序
2020/03/30 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
《匆匆》教学反思
2014/02/22 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
水电站项目建议书
2014/05/12 职场文书
关键在于落实心得体会
2014/09/03 职场文书
擅自离岗检讨书
2014/09/12 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
防汛通知
2015/04/25 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android