怎么动态生成两点连线

我以前做的，画线没什么问题．是用１像素的点连起来的
<html>
<head>
<title>Tetris</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
html, body{}{margin:0px;}
#test{}{
  position:absolute; left:500px; top:50px;
  width:10px; height:1px;
  font-size:1px;
  background:#FF0000;
  padding:0px;margin:0px;
  overflow:hidden;
};
.line{}{
  position:absolute; overflow:hidden;font-size:1px; z-index:10;
}
</style>
<script type="text/javascript">

function EasyDraw(){
  this.out = document.createElement("div");
  this.out.style.position = "relative";
  //原点坐标;
  this.setOrigin(0, 0);

  document.body.appendChild(this.out);
  //
  this.size = 1;
  this.color = "#000090";
  //
  this.x = 0;
  this.y = 0;

}
EasyDraw.prototype = {
  setOrigin : function(x, y){
   this.originX = x;
   this.originY = y;
   this.out.style.left = this.originX + "px";
   this.out.style.top = this.originY + "px";
  },
  //添加HTML
  _inserthtml : function(obj, html){
   if(obj.insertAdjacentHTML){
    obj.insertAdjacentHTML("beforeEnd", html);
   }else{
    var range = obj.ownerDocument.createRange();
    if(obj.lastChild){
                    range.setStartAfter(obj.lastChild);
                    frag = range.createContextualFragment(html);
                    obj.appendChild(frag);
                }else{
                   obj.innerHTML += html;
                }
   }
  },
  _gethtml : function(x, y, wid, hei){
   var fillcolor = "", strResult;
   if(arguments.length > 4)
    fillcolor = arguments[4];
   if(fillcolor == "")
   {
    //线
    if (wid==1 || hei == 1){
     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;background: " + this.color + ";'></div>";
    }else{ //矩形
     strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";'></div>";
    }
   }
   else{ //fill
    strResult = "<div style='overflow:hidden;position:absolute;font-size:1px;left:" + x + "px;top:" + y + "px;width:" + wid + "px;height:" + hei + "px;border:" + this.size + "px solid " + this.color + ";background:"+ fillcolor+"'></div>";
   }
   return strResult;
  },
  //设置线的大小
  setsize : function(size){
   this.size = size;
  },
  //设置线的颜色
  setcolor : function(color){
   this.color = color;
  },
  //画点
  setpixel : function(x, y){
   this._line(x, y, this.size, this.size);
  },
  dot : function(x, y){this.setpixel(x, y);},
  //画直线
  _line : function(x, y, wid, hei){
   this._inserthtml(this.out, this._gethtml(x, y, wid, hei));
  },
  //画直线
  _line2 : function(obj, x, y, wid, hei){
   obj.innerHTML += this._gethtml(x, y, wid, hei);
  },
  //画线起始坐标x1, y1, 结束坐标 x2, y2
  line : function(x1, y1, x2, y2){
   var tmp;
   if(x1 > x2 ){
    tmp = x1;
    x1 = x2;
    x2 = tmp;
   }
   if(y1 > y2){
    tmp = y1;
    y1 = y2;
    y2 = tmp;
   }
   if(x1 == x2){ // |
    this._line(x1, y1, this.size, y2-y1 );
   }else if(y1 == y2){ // --
    this._line(x1, y1, x2-x1, this.size);
   }else{ //  or /
    var n = (x2-x1) / (y2-y1);
    var newDoc = document.createDocumentFragment();
    newDoc.innerHTML = "";
    if(n >= 1){
     var diff = x2 - x1;
     for(var i=0; i<diff; i++){
      this._line2(newDoc, x1 + i, y1 + parseInt(i/n), this.size, this.size);
     }
    }else{
     var diff = y2 - y1;
     for(var i=0; i<diff; i++){
      this._line2(newDoc, x1 + parseInt(i*n), y1 + i, this.size, this.size);
     }
    }
    this._inserthtml(this.out, newDoc.innerHTML);
   }//end of if
  },
  //移动光标
  moveTo : function(x, y){
   this.x = x;
   this.y = y;
  },
  //从开始光标画线
  lineTo : function(x, y){
   this.line(this.x, this.y, x, y);
   this.x = x;
   this.y = y;
  },
  //画矩形left, top, right, bottom
  //+1重载：第5个参数为填充颜色
  rect : function(l, t, r, b){
   var tmp, wid, hei;
   if(l>r){
    tmp=l;l=r;r=tmp;
   }
   if(t>b){
    tmp=t;t=b;b=tmp;
   }
   wid = r-l;
   hei = b-t;
   if(arguments.length <= 4){
    this._inserthtml(this.out, this._gethtml(l, t, wid, hei));
   }else{ //fill
    this._inserthtml(this.out, this._gethtml(l, t, wid, hei, arguments[4]));
   }
  },
  //画圆，速度比较慢, 盼高人给个高效的算法
  circle : function(x, y, r){
   var radio, xx, yy;
   var Pi = Math.PI;
   var newDoc = document.createDocumentFragment();
   newDoc.innerHTML = "";
   for(var i=0.0;i<360;i+=0.5){
    radio=i*Pi/180;
    xx=r * Math.cos(radio) + x;
    yy=r * Math.sin(radio) + y;
    this._line2(newDoc, xx, yy, this.size, this.size);
   }
   this._inserthtml(this.out ,newDoc.innerHTML);
  },
  toString : function(){ return this.out.innerHTML;},
  //清除
  clear : function(){ this.out.innerHTML = "";}
}
</script>
</head>
<script type="text/javascript">
var oImg = null;
function $(o) {return document.getElementById(o);}
function DrawImage(){

var now1 =new Date();
var StarTime_S=now1.getTime();

oImg = new EasyDraw();

oImg.setOrigin(50,50);
oImg.setpixel(50,50);
oImg.dot(60,60);
oImg.line(100, 100, 300, 100);
oImg.setcolor("#009000");
oImg.line(100, 100, 100, 300);
oImg.setcolor("#900000");
oImg.line(100,100,200,400);
oImg.setcolor("#009090");
oImg.line(100,100,400,200);
oImg.rect(200,200,250,250);
oImg.setcolor("#ff0000");
oImg.rect(300,300,350,350, "#EEEEEE");
//oImg.circle(200,200,100);
oImg.moveTo(400,400);
oImg.lineTo(400,500);
oImg.lineTo(500,500);
oImg.lineTo(500,400);

var now2 =new Date();
var EndTime_S=now2.getTime();
$("showTime").innerHTML = (EndTime_S-StarTime_S)+"ms";
}
function Show(){
$("divShow").style.display = "inline";
$("txtShow").value = oImg.toString();
oImg.clear();
}
</script>
<body >
<input type="button" name="btnStart" value=" 测试 " onClick="DrawImage()" />
<input type="button" name="btnShow" value=" 查看 " onClick="Show()" />
执行时间：<span id="showTime"></span>
<br />
<div id="divShow" style="display:none;">
  <textarea id="txtShow" rows="30" cols="100"></textarea>
</div>
<div id="test"></div>
</body>
</html>

参考
<html>
<head>
<script Language="javascript">
function drawDot(x,y,color,size)
{
  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>");
}
function drawLine(x1,y1,x2,y2,color,size,style)
{
  var i;
  var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
  var theta=Math.atan((x2-x1)/(y2-y1));
  if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))
  {
   theta = Math.PI + theta;
  }
  var dx=Math.sin(theta);
  var dy=Math.cos(theta);
  for(i=0;i<r;i++){
    switch(style){
      case 0:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 1:
        i+=size*2;
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
      case 2:
        if(Math.floor(i/4/size)%2==0){
          drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        else{
            i+=size*2;
            drawDot(x1+i*dx,y1+i*dy,color,size);
        }
        break;
      default:
        drawDot(x1+i*dx,y1+i*dy,color,size);
        break;
    }
  }
}function drawFilledRect(x1,y1,x2,y2,color)
{
  document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x1)+"; top: "+(y1)+";background-color: "+color+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>");
}
function drawRect(x1,y1,x2,y2,color,size,style)
{
  drawLine(x1,y1,x2,y1,color,size,style);
  drawLine(x1,y2,x2,y2,color,size,style);
  drawLine(x1,y1,x1,y2,color,size,style);
  drawLine(x2,y1,x2,y2,color,size,style);
}
function drawOval(x,y,a,b,color,size,precision)
{
  var i;
  var iMax=2*Math.PI;
  var step=2*Math.PI/(precision*Math.sqrt(a*b)*4.5);
  for(i=0;i<iMax;i+=step)
  {
    drawDot(x+a*Math.cos(i),y+b*Math.sin(i),color,size);
  }
}
function drawPoly(x,y,r,n,color,size,style)
{
  var i;
  var theta=Math.PI;
  var x1=x,y1=y-r,x2,y2;
  for(i=0;i<n;i++)
  {
    theta-=(2*Math.PI/n);
    x2=x+r*Math.sin(theta);
    y2=y+r*Math.cos(theta);
    drawLine(x1,y1,x2,y2,color,size,style);
    x1=x2;
    y1=y2;
  }
}
</script>
</head>
<body>
<script Language="javascript">
drawLine(20,20,300,20,"#0000cc",2,0);
drawLine(20,40,300,40,"#0000cc",2,1);
drawLine(20,60,300,60,"#0000cc",2,2);
drawFilledRect(20,80,300,200,"009900");
drawRect(20,220,220,320,"ff0000",2,0);
drawRect(240,220,440,320,"ff0000",2,1);
drawRect(460,220,660,320,"ff0000",2,2);
drawOval(250,450,120,50,"006600",1,1);
drawOval(250,650,120,120,"006600",2,0.5);
drawPoly(200,900,100,3,"ff8800",2,0);
drawPoly(400,900,100,4,"ff8800",2,1);
drawPoly(600,900,100,5,"ff8800",2,2);
drawPoly(200,1100,100,6,"ff8800",2,0);
drawPoly(400,1100,100,7,"ff8800",2,1);
drawPoly(600,1100,100,12,"ff8800",2,2);
</script>
</body>
</html>

虽然JS能做出来
但还是建议用VML写一个不用VML实现的<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.style1 {
    font-size: x-small;
height:200px;
width:100%;
}
</style>
<script>
function makedot(x,y){ //画点函数
document.getElementById('div').innerHTML=document.getElementById('div').innerHTML+"<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>";
}
/**
函数功能：根据两点坐标画直线。
函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
var slope=(y2-y1)/(x2-x1); //斜率
var diff=x2-x1;
if(x1<x2){
  for(var i=0;i<diff;i++){
   makedot(x1+i,y1+slope*i);
  }
}else if(x1>x2){
  for(var i=0;i>diff;i--){
   makedot(x1+i,y1+slope*i);
  }
}else{ //画垂直线
  var temp=y2-y1;
  if(temp>0){
   for(var i=0;i<temp;i++){
    makedot(x1,y1+i);
   }
  }else{
   for(var i=0;i>temp;i--){
    makedot(x1,y1+i);
   }
  }
}
}
function createline()
{
if(document.form1.AX.value!=""&&document.form1.AY.value!=""&&document.form1.BX.value!=""&&document.form1.BY.value!="")
{
line(document.form1.AX.value,document.form1.AY.value,document.form1.BX.value,document.form1.BY.value)
}
}
</script>
</head><body>
<span class="style1" id="div">
</span>
<div>
<form name="form1" method="post" action="">
A点X:
  <input name="AX" type="text" id="AX" />
  Y:<input name="AY" type="text" id="AY" /><br />
B点X:
  <input name="BX" type="text" id="BX" />
  Y:<input name="BY" type="text" id="BY" /><br />
  <input name="ok" type="button" id="ok" onclick="createline()" value="画线" />
<input name="提交" type="submit" value="提交" />
</form>
</div>
</body>
</html>

http://topic.csdn.net/t/20030713/10/2022085.html其实论坛里也早就有提问过

http://college.sxhighway.gov.cn/document/2002100715475201899.htm提供一个网上的

汗！！
你是不是直接双击HTML文件浏览的？？你要用IIS等服务器软件来浏览就不会提示你了

调试易

怎么动态生成两点连线

解决方案 »