JavaScript点击两点绘制直线简单介绍

本章节分享一段代码实例，它实现点击两点能够绘制一条直线的效果。

代码实例如下:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css"> 
#container{ 
  width:1000px; 
  height:600px; 
  border:1px #bfbfbf solid;
} 
</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;
}
window.onload=function(){
  var container=document.getElementById("container");
  container.onclick=function(ev){
    var ev=window.event||ev;
    recordPoint(ev);
  }
}
</script>
</head> 
<body> 
<div id="container"> 
</div>
</body> 
</html>

代码描述：JavaScript点击两点绘制直线。JavaScript点击两点绘制直线简单介绍

下载全部收藏

278 370

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册