脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 使用鼠标画线

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

 更新时间：2014年08月19日 17:07:44   投稿：whsnow  
用JavaScript实现用鼠标画线，具体步骤是首先是画点，在根据两点坐标画直线，最后是获取鼠标位置,需要的朋友可以参考下
<!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 控制字体大小设置的方法

    下面小编就为大家带来一篇JavaScript 控制字体大小设置的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 网页开发中的容易忽略的问题 javascript HTML中的table

    网页开发中的容易忽略的问题 javascript HTML中的table

    最近在搞在线电子表格这个东西,下面的是使用中的一些知识技巧。
    2009-04-04
  • JavaScript数据类型转换简单方法举例

    JavaScript数据类型转换简单方法举例

    JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式,下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下
    2023-12-12
  • javascript中返回顶部按钮的实现

    javascript中返回顶部按钮的实现

    这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码,非常不错,这里推荐给小伙伴们
    2015-05-05
  • javascript DOM实用学习资料

    javascript DOM实用学习资料

    比较详细的实例分析了dom的一些常用方法
    2008-09-09
  • Javascript 生成指定范围数值随机数

    Javascript 生成指定范围数值随机数

    查手册后才知道, 介绍的信息少得可怜呐, 没有介绍生成 m-n 范围的随机数..., 就只是给你一个 Math.random() 了事.
    2009-01-01
  • 判断js数据类型的函数实例详解

    判断js数据类型的函数实例详解

    这篇文章主要介绍了一个判断js数据类型的函数，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • es6 js 匹配两个数组对象的方法

    es6 js 匹配两个数组对象的方法

    这篇文章主要介绍了es6 js 匹配两个数组对象的方法,实例代码介绍了判断两个数组用的value是否相等，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03
  • JsChart组件使用详解

    JsChart组件使用详解

    JSChart能够在网页上生成图标，常用于统计信息，十分好用的一个JS组件。这篇文章主要介绍了JsChart组件使用详解,需要的朋友可以参考下
    2018-03-03
  • 解决Js先触发失去焦点事件再执行点击事件的问题

    解决Js先触发失去焦点事件再执行点击事件的问题

    今天小编就为大家分享一篇解决Js先触发失去焦点事件再执行点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论