DDR爱好者之家

用JavaScript实现使用鼠标画线的示例代码
站长资源 2025/11/5 佚名
58 1538
DDR爱好者之家 Design By 杰米
<!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 "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>
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米