div上、下、左、右边框线上各有一个点，当鼠标在点上按下，并移动，会以所点击的点为起点，画出线段

当鼠标出现偏移时，线段变成折线

RT

楼主知道bresenham直线算法不
可以用一个DIV用样式写好作为点，然后通过createElement每次建立一个坐标DIV，然后循环输入开始结束坐标
我这边用CANVAS做了实验是可行的，核心的直线算法如下

function BresenhamLine(startPoint , endPoint , pin){                                     //pin是点的大小
        //Point对象是我自己封装的XY轴坐标
var p ;//决策参数    
var tempX,tempY,tempD;    

var sx  = startPoint.x;    
var sy  = startPoint.y;    
var ex = endPoint.x;    
var ey = endPoint.y;    

var dx =Math.abs(  ex- sx);    
var dy =Math.abs( ey-sy);    

var largeDegree = false;    

if(dy>dx){    
largeDegree= true;    

tempX= sx;    
sx=ex;    
ex=tempX;    

tempY = sy;    
sy=ey;    
ey=tempY;    

tempD=dx;    
dx=dy;    
dy=tempD;    
}    



p = 2*dy - dx;    
var tdy = 2*dy;    
var tdminy = 2*dy - 2*dx;    
var x=sx  , y=sy;    
var ix = (sx>ex)?-pin:pin;    
var iy = (sy>ey)?-pin:pin;        


if(largeDegree){    
pointCollection.push(new Point(x,y , pin));    
while(y!==ey){    
y+=iy;    
if(p<0){    
p+=tdy;    
}else{    
x+=ix;    
p+=tdminy;    
}    
pointCollection.push(new Point(x,y , pin));    
}    

}else{    
pointCollection.push(new Point(x,y , pin));    
while(x !== ex){    
x+=ix;    
if(p<0){    
p+=tdy;    
}else{    
y+=iy;    
p+=tdminy;    
}    
pointCollection.push(new Point(x,y , pin));    
}    
}    


}

这不是div吧,这应该是canvas了 再看看别人怎么说的。