html4 画直线 div模拟点 直线算法
line.html //能画直线就能画其他的图像，只是需要相应的算法，不过这样用性能不是很好，当然一下的代码还有不完善的地方，在这里只是做个演示
//因为公司最近要做个图像化的功能，我只会js
function Point(x,y,c){//用一个div模拟一个像素点x和y是坐标c是颜色
var div;
this.div=document.createElement("div");
this.div.style.fontSize="0px";
this.div.style.overFlow="hidden";
this.div.style.width="1px";
this.div.style.height="1px";
this.div.style.position="absolute";
this.div.style.backgroundColor=c;
this.div.style.top=y+"px";
this.div.style.left=x+"px";
document.body.appendChild(this.div);
}
function drawLine(x0,y0,x1,y1,c){//画一条直线x0,y0,x1,y1分别是开始坐标和结束坐标c是颜色
var x,y;
var cx,cy;
var steps=Math.abs(x1-x0)>Math.abs(y1-y0)?Math.abs(x1-x0):Math.abs(y1-y0);
x=parseFloat(x0);
y=parseFloat(y0);
cx=(x1-x0)/steps;
cy=(y1-y0)/steps;
for(var i=0;i
new Point(Math.round(x),Math.round(y),c);
x+=cx;
y+=cy;
}
}
// drawLine(0,0,200,200,"red");
/* for(var i=0;i<1000;i+=20){
//drawLine(0,0,200,i,"#00ff00");
drawLine(i,0,i,1000,"#00ff00");
drawLine(0,i,1000,i,"#00ff00");
}*/
drawLine(20,1000,0,0,"#00ff00");
var posX,posY,selectDiv;//这里的 selectDiv是一个选择框
document.onmousedown=function(e){
if(!e)e=window.event;
posX=e.clientX;
posY=e.clientY;
selectDiv=document.createElement("div");
selectDiv.style.fontSize="0px";
selectDiv.style.overFlow="hidden";
selectDiv.style.width="1px";
selectDiv.style.height="1px";
selectDiv.style.position="absolute";
selectDiv.style.top=posY+"px";
selectDiv.style.left=posX+"px";
selectDiv.style.border="1px dashed #B3B3B3";
document.body.appendChild(selectDiv);
}
document.onmousemove=function(e){
if(!e)e=window.event;
if(selectDiv){
selectDiv.style.width=(e.clientX-posX)+"px";
selectDiv.style.height=(e.clientY-posY)+"px";
drawLine(posX,posY,e.clientX,e.clientY,"red");
}
}
//new Point(20,20,"green");
回复讨论(解决方案)
屏幕绘制像素级别的直线可以直接确定每个点的坐标 因为不会出现小数坐标
x 每个点必须 1-x
y 根据 1 - (1-x)/(x/y)比例增加
