javascript 怎样实现 两个div 之间画一条线

javascript 怎样实现 两个div 之间画一条线
用DrawLine 怎么实现

解决方案 »

  1.   

    问题一:不同浏览器会有差别.下面这个在IE中能实现:<html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <title>VML Test</title><script type="text/javascript">
    function drawLine() {
    /*@cc_on @*/
    /*@if (@_jscript_version >= 4)
    var A = [10,150];
    var B = [400,200];
    var myLine = document.getElementById('line01');
    myLine.from = A;
    myLine.to = B;
    /*@end @*/
    }
    window.onload = drawLine;
    </script><style type="text/css">
    v\:* { behavior: url(#default#VML);}
    body { background-color: #FFFFFF}
    </style></head><body><!--[if gte IE 5]>
    <v:group id="vmlApp"
    style="position: absolute; left: 50px; top: 50px; height: 300px; width: 500px"
    coordorigin="0,0"
    coordsize="500,300">
    <v:rect id="vmlMainFrame"
    style="position:absolute; top:0px; left:0px; width:500px; height:300px">
    <v:fill
    color="#FFFFFF"/>
    <v:stroke
    color="#000000"
    weight="2px"/>
    </v:rect>
    <v:line id="line01">
    </v:line>
    </v:group>
    <div id="a" style="position: absolute; left: 60px; top: 200px; border:1px solid blue">A DIV</div>
    <div id="b" style="position: absolute; left: 450px; top: 250px; border:1px solid blue">B DIV</div>
    <script type="text/JScript">
    self.isVMLEnabled = true;
    </script>
    <![endif]-->
    <script>
    if(self.isVMLEnabled == undefined) {
    document.write('<embed width="222" height="300"
    src="http://www.carto.net/papers/svg/samples/shapes.svg"
    name="printable_map" type="image/svg+xml">');
    }
    </script>
    </body>
    </html>问题二:见下例
    <!DOCTYPE html>
    <html lang="zh-CN"><head>
    <meta charset="ANSI" />
    <title>Canvas Demo</title>
    </head>
    <body bgcolor="white"><pre>
    <canvas id="myCanvas">
    你的浏览器不支持HTML5 Canvas标记.
    解决方案：可以使用火狐浏览器浏览。
    </canvas>
    <script type="text/javascript">
    <!--
    function drawCanvas()
    {
    //画一个三角形
    var canvas=document.getElementById('myCanvas');
    var context=canvas.getContext('2d');
    context.fillStyle = '#00f';
    context.strokeStyle = '#f00';
    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(10, 10); 
    context.lineTo(100, 10);
    context.lineTo(10, 100);
    context.lineTo(10, 10);
    context.stroke();
    context.closePath();
    }
    drawCanvas();
    -->
    </script>
    </body></html>