静态页面html里画坐标轴

iversion 2009-10-27

展开全文

http://topic.csdn.net/u/20091023/10/09F00301-3653-4252-980D-07BFD0C59727.html

<html><head>
        <META http-equiv=Content-Style-Type content=text/css>
        <style>
            rv\:* { behavior:url(#default#VML); }
        </style>
        <script>
            function arrowLine(x1,y1,x2,y2,lnclr,lnsw){
                return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'"><rv:stroke dashstyle="solid" endarrow="classic" /></rv:line>';
            }
            function line(x1,y1,x2,y2,lnclr,lnsw){
                return '<rv:line style="position:absolute;" from="'+x1+','+y1+'" to="'+x2+','+y2+'" strokecolor="'+lnclr+'" strokeweight="'+lnsw+'" />';
            }
            window.onload=function(){
                draw();
                drawAxis()
            }

            function draw(){
                document.getElementById("wave").innerHTML= arrowLine(0,500,0,0,"red",1)+arrowLine(0,500,500,500,"red",1);
                
            }
            
            function drawAxis(){
                var xaxis=document.getElementById("xaxis");
                var yaxis=document.getElementById("yaxis");
                var tmpx=[];
                var tmpy=[]
                for(var i=0;i<=5;i++){
                    tmpx.push('<span style="position:relative;');
                    tmpx.push(';width:98px">');
                    tmpx.push(i);   //值
                    tmpx.push('</span>');
                    if(i!=5)
                        tmpx.push(line(0,-10,0,-5,"red",2)); //刻度
                }
                for(var j=0;j <=10;j++){
                    tmpy.push(' <span style="position:absolute;height:49px;top:');
                    tmpy.push(500-49*j);
                    tmpy.push('">');
                    tmpy.push(j);  //值
                    tmpy.push('</span>');
                    if(j!=0)
                        tmpy.push(line(15,500-49*j,20,500-49*j,"red",2)); //y刻度
                }
                xaxis.innerHTML=tmpx.join("");
                yaxis.innerHTML=tmpy.join("");
            }
          
        </script>
    </head>
    <body>
        <div id="wave" style="position:absolute;left:100px;"></div>
        <div id="yaxis" style="position:absolute;left:80px;height:600px;width:40px"></div>
        <div id="xaxis" style="position:absolute;top:520px;width:600px;left:95px"></div>
    </body>
</html>