那位有关于JavaScript图形控件的文章？马上给分，

http://www.chinavisual.com/articles/3047.html

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>emu's paint without vlm</title>
    </head>
    <body>
    <button onclick="testDrawCurve()">画曲线</button>
    <button onclick="testDrawArc()">画弧线</button>
    <button onclick="testDrawCircle()">画圆</button>
    <button onclick="testDrawLine()">画线</button>
    <button onclick="testDrawRectangle()">画矩形</button>
    <button onclick="testDrawPie()">画饼图</button>
    <div id=div1></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function testDrawCurve()
    {
    div1.innerHTML = drawCurve();
    }
    function testDrawArc()
    {
    div1.innerHTML =drawArc(150,150,100,0,270,"viloet")
    }
    function testDrawCircle()
    {
    div1.innerHTML = drawCircle(200,200,150,"blue");
    }
    function drawCircle(x0,y0,radius,color)
    {
    return drawArc(x0,y0,radius,0,360,color)
    }
    function testDrawLine()
    {
    div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
    }
    function testDrawRectangle()
    {
    div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
    }
    function testDrawPie()
    {
    div1.innerHTML = drawPie(300,200,120,0,45,"red");
    }function drawLine(x0,y0,x1,y1,color)
    {
    var rs = "";
    if (y0 == y1)  //画横线
    {
    rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" height=3 width="+Math.abs(x1-x0)+"></td></table>";
    }
    else if (x0 == x1)  //画竖线
    {
    rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width=1 height="+Math.abs(y1-y0)+"></td></table>";
    }
    else
    {
    var lx = x1-x0
    var ly = y1-y0
    var l = Math.sqrt(lx*lx+ly*ly)
    rs = new Array();
    for (var i=0;i<l;i+=1)
    {
    var p = i/l;
    var px = x0 + lx*p;
    var py = y0 + ly*p;
    rs[rs.length] = "<table style='top:"+py+";left:"+px+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
    }
    rs = rs.join("");
    }
    return rs
    }
    function drawRectangle(x0,y0,x1,y1,color)
    {
    if (x0 == x1 || y0 == y1) return;
    if (x0>x1) {var t=x0;x0=x1;x1=t}
    if (y0>y1) {var t=y0;y0=y1;y1=t}
    return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
    }
    function drawPie(x0,y0,radius,startAngle,endAngle,color)
    {
    var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    var startx=Math.sin(startAngle)*radius+x0;
    var endx=Math.sin(endAngle)*radius+x0;
    var starty=Math.cos(startAngle)*radius+y0;
    var endy=Math.cos(endAngle)*radius+y0;
    rs += drawLine(x0,y0,startx,starty,color)
    rs += drawLine(x0,y0,endx,endy,color)
    return rs;
    }
    function drawArc(x0,y0,radius,startAngle,endAngle,color)
    {
    rs = new Array();
    tmpar = new Array();
    startAngle = startAngle/360*Math.PI*2;
    endAngle = endAngle/360*Math.PI*2;
    for (var i=startAngle;i<endAngle;i+=(1/radius))
    {
    var dx = Math.sin(i)*radius+x0;
    var dy = Math.cos(i)*radius+y0;
    rs[rs.length] = "<table style='top:"+dy+";left:"+dx+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
    }
    return (rs.join(""));
    }
    function drawCurve()
    {
    var rs = new Array();
    for (var i=0;i<2*Math.PI;i+=.02)
    {
    var x = 300-Math.sin(i)*100
    var y = 300-Math.cos(i)*100
    rs[rs.length] = "<table style='top:"+x+";left:"+(i*100+90)+";position:absolute'><td bgcolor=blue height=3></td></table>";
    rs[rs.length] = "<table style='top:"+y+";left:"+(i*100+90)+";position:absolute'><td bgcolor=violet height=3></td></table>";
    }
    return rs.join("");
    }
    //-->
    </SCRIPT>
    </body>
    </html>
      

  2.   

    呵呵，javascript有图形控件吗？
      

  3.   

    <script>
    var i,n;
    var w=200,h=160;//设置控件的宽和高
    var arrData=new Array(12,13,14,21,23,24,32,34,43,20);//设置饼图的数据document.write('<OBJECT ID="DAControl" style="WIDTH='+w+';HEIGHT='+h+';border:0 solid black" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"></OBJECT>');//画出DAControl
    var m=DAControl.PixelLibrary;
    var arrCol=new Array(m.Red, m.Green, m.Blue, m.Aqua, m.Fuchsia, m.Gray,m.Lime, m.Maroon, m.Navy, m.Olive, m.Purple, m.Silver, m.Teal, m.Cyan, m.Magenta, m.Yellow, m.Black, m.White);//设置颜色数组
    var iSum=0;for(i=0;i<arrData.length;i++)iSum+=arrData[i];//求出各数据的累加和
    var ds=m.NewDrawingSurface();
    var iFrom=0,iTo=0;
    var iMax=4;//设置重画次数
    var px=0,py=4;//设置x,y轴的倾斜度
    for(n=0;n<=iMax;n+=0.5)//重画可产生立体感
    for(i=0;i<arrData.length;i++){
    ds.FillColor(arrCol[i]);//设置填充颜色
    ds.BorderColor(arrCol[i]);//设置边框颜色
    iTo+=arrData[i];//设置终止地点相关系数
    ds.PieDegrees(-w/2+n*px,-h/2+(iMax-n)*py,iFrom/iSum*360,iTo/iSum*360,w-iMax*px,h-iMax*py);//画小块饼图
    iFrom=iTo;//设置下一个数据初始位置相关系数
    }
    DAControl.Image=ds.Image;//设置DAControl的图形
    DAControl.Start();//执行
    </script>
      

  4.   

    好东西嘛，这个有点象mschart的东西真有意思。孟子的好东西总是要藏起来，慢慢的掏。
      

  5.   

    net_lover和我提供的连接有什么不同呢？难道你也是原创，转载请注明出处
      

  6.   

    http://www.microsoft.com/Developer/PRODINFO/directx/dxm/help/da/oview/JScript_Samps.htm
      

  7.   

    http://www.csdn.net/expert/topic/884/884501.xml?temp=.18594