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

 
 

 
 
 
 
 
/**
 画点
*/ 
function makedot(x, y){ 
 pointDiv = ""; 
 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;
}