如何在网业上画线？

直线（水平或竖直）的可以直接用一个div层
斜线把div层做成1*1的系列排起来就可以了呀

解决方案 »

  1.   

    呵呵，正巧手头还真的有个不用vml的。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE> emu </TITLE>
    <META NAME="Author" CONTENT="emu(ston)">
    <META NAME="Keywords" CONTENT="javascript">
    <META NAME="Description" CONTENT="emu's test page">
    </HEAD>
    <BODY>
    <img src="http://www.csdn.net/images/Homeother/ad.JPG" onclick="tryDraw()">
    <div id=output></div><SCRIPT LANGUAGE="JavaScript">
    <!--
    var xx=50
    var yy=50;
    function tryDraw(){
    var x = event.x
    var y = event.y
    output.innerHTML = drawLine(xx,yy,x,y,"red")
    xx=x;yy=y;
    }
    function drawLine(x0,y0,x1,y1,color){
    x0 = Math.round(x0);
    x1 = Math.round(x1);
    y0 = Math.round(y0);
    y1 = Math.round(y1);
    var rs = "";
    if (y0 == y1){  //&raquo;&shy;&ordm;á&Iuml;&szlig;
    if (x0>x1){var t=x0;x0=x1;x1=t}  
    rs = "<img class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
    }
    else if (x0 == x1){  //&raquo;&shy;&Ecirc;ú&Iuml;&szlig;
    if (y0>y1){var t=y0;y0=y1;y1=t} 
    rs = "<img class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
    }
    else{
    var lx = x1-x0;
    var ly = y1-y0;
    if (Math.abs(lx)>Math.abs(ly)){
    if (ly<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dx = lx/ly;
    rs = new Array(ly);
    for (var i=0;i<ly;i++){
    var left,width;
    if (dx>0){
    left = Math.round(i*dx);
    width = Math.round((i+1)*dx)-left;
    left += x0;
    if (width+left>x1) width = x1-left;
    }else{
    left = Math.round((i+1)*dx);
    width = Math.round((i)*dx)-left;
    left += x0;
    if (left<x1) {
    width = width+left-x1;
    left=x1;
    }
    }
    rs[i] = "<img class=emuH style='top:"+(y0+i)+";left:"+left+";width:"+width+";background-color:"+color+"'/>";
    }
    }else{
    if (lx<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dy = ly/lx;
    rs = new Array(lx);
    for (var i=0;i<lx;i++){
    var top,height;
    if (dy>0){
    top = Math.round(i*dy);
    height = Math.round((i+1)*dy)-top;
    top += y0;
    if (height+top>y1) height = y1-top;
    }else{
    top = Math.round((i+1)*dy);
    height = Math.round((i)*dy)-top;
    top += y0;
    if (top<y1) {
    height = height+top-y1;
    top=y1;
    }
    }
    rs[i] = "<img class=emuW style='top:"+top+";left:"+(x0+i)+";height:"+height+";background-color:"+color+"'/>";
    }
    }
    rs = rs.join("");
    }
    return rs
    }
    document.writeln("<style>");
    document.writeln(".emuW{position:absolute;font-size:1px;width:1}");
    document.writeln(".emuH{position:absolute;font-size:1px;height:1}");
    document.writeln(".emuWH{position:absolute;font-size:1px;width:1;height:1}");
    document.writeln("A{text-decoration:none;color:#FF66FF}");
    document.writeln("</style>");//-->
    </SCRIPT>
    </BODY>
    </HTML>
      

  2.   

    介绍个网站给你看看，可能有用
    http://www.walterzorn.com/
      

  3.   

    去楼上介绍的网站看了下，果然不错，和我想到一块去了，从实现方式到优化手段都和我同出一辙。他的：
    if (x1 > x2)
    {
    var _x2 = x2;
    var _y2 = y2;
    x2 = x1;
    y2 = y1;
    x1 = _x2;
    y1 = _y2;
    }
    var dx = x2-x1, dy = Math.abs(y2-y1),
    x = x1, y = y1,
    yIncr = (y1 > y2)? -1 : 1; if (dx >= dy)
    {
    ...
    我的：
    var lx = x1-x0;
    var ly = y1-y0;
    if (Math.abs(lx)>Math.abs(ly)){
    if (ly<0){
    ...
    我原来画出来的老外几乎都画出来了，不过还缺一招老外没想出来：script画扇型（饼图）呵呵，我得意的笑。
      

  4.   

    用VMLhttp://www.lshdic.com/VMLEDIT.htm