用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 相关文章推荐
js单例模式的两种方案
Oct 22 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
vue实现信息管理系统
May 30 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 开发工具
2006/12/06 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
解析Python编程中的包结构
2015/10/25 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python常用库推荐
2016/12/04 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
自荐书范文
2013/12/08 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
《三峡》教学反思
2014/03/01 职场文书
文明礼仪标语
2014/06/13 职场文书
电子专业自荐信
2014/07/01 职场文书
停车场管理协议书范本
2014/10/08 职场文书
《1942》观后感
2015/06/08 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Python PIL按比例裁剪图片
2022/05/11 Python