用javascript 画直线的文章网上有一些,但很多都不太清楚,我仔细弄了一下,把认为基本成熟的程序公布在下面,希望能对大家有个参考.
<html>
<SCRIPT LANGUAGE="JavaScript">
var sX = 0;
var sY = 0;
var eX = 0;
var eY = 0;
var slope = 0;
function print(str){
body.insertAdjacentHTML("AfterBegin",str)
}
function mousedown(){
sX = event.x;
sY = event.y;
}
function mouseup(){
eX = event.x;
eY = event.y;
slope = (Math.abs(sY - eY))/(Math.abs(sX - eX));
outPlot();
}
function outPlot() {
for(i=0; i<(Math.abs(sX-eX)); i++){
if (sX > eX)
{
if (sY < eY)
{
for(j=0; j<=Math.round(slope); j++){
print('<span style="position:absolute;left:'+parseInt(sX-i)+';top:' + (sY + (i * slope + j)) + ';height:1;width:1;font-size:1px;background-color:red"></span>')
}
}else{
for(j=0; j<=Math.round(slope); j++){
print('<span style="position:absolute;left:'+parseInt(sX-i)+';top:' + (sY - (i*slope + j)) + ';height:1;width:1;font-size:1px;background-color:red"></span>')
}
}
}else{
if (sY < eY){
for(j=0; j<=Math.round(slope); j++){
print('<span style="position:absolute;left:'+parseInt(sX+i)+';top:'+(sY + (i*slope + j))+';height:1;width:1;font-size:1px;background-color:red"></span>')
}
}else{
for(j=0; j<=Math.round(slope); j++){
print('<span style="position:absolute;left:'+parseInt(sX+i)+';top:' + (sY - (i*slope + j)) + ';height:1;width:1;font-size:1px;background-color:red"></span>')
}
}
}
}
}
</SCRIPT>
<body id = body onmousedown = 'mousedown()' onmouseup = 'mouseup()'>
</body>
</html>