用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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
VUE 动态组件的应用案例分析
Dec 02 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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
React Router V4使用指南(精讲)
2018/09/17 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
理解Python中的With语句
2016/03/18 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
一个C/C++编程面试题
2013/11/10 面试题
借款担保书范文
2014/05/13 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
个人租房协议书
2014/11/28 职场文书
施工安全员岗位职责
2015/04/11 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
图书借阅制度范本
2015/08/06 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS