JS画图函数

<script language="JavaScript">
    IE4 = !(navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")

    var xo=0
    var yo=0
    var Ox = -1
    var Oy = -1

    var rad = Math.PI/180
    var maxY = 400
    var color = "red"

    function print(str) {
      document.write(str)
    }

    function orgY(y) {
  return maxY-y
    }
    function outPlot(x,y,w,h) {
      print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
    }

    function Plot(x,y) {
      outPlot(x,y,1,1)
      if(Ox>=0 || Oy>=0) {
       ShowLine(Ox,Oy,x-Ox,y-Oy)
      }
      Ox = x
      Oy = y
    }

    function ShowLine(x,y,w,h) {
      if(w<0) {
       x += w
       w = Math.abs(w)
      }
      if(h<0) {
       y += h
       h = Math.abs(h)
      }
      if(w<1) w=1
      if(h<1) h=1

      outPlot(x,y,Math.round(w),Math.round(h))
     }

    function LineTo(x,y) {
      Line(xo,yo,x,y)
    }

    function sign(n) {
      if(n>0) return 1
      if(n<0) return -1
     return n
    }

    function Line(x1,y1,x2,y2) {
      x2 = Math.round(x2)
      y2 = Math.round(y2)
      xo = x2
      yo = y2
      y1 = orgY(y1)
      y2 = orgY(y2)
      var str = ""
      var i=0

     var x = x1
     var y = y1
     dx = Math.abs(x2-x1)
     dy = Math.abs(y2-y1)
     s1 = sign(x2-x1)
        s2 = sign(y2-y1)

     if(dx==0 || dy==0) {
      ShowLine(x1,y1,x2-x1,y2-y1)
      return
        }

        if(dx>dy) {
       temp = dx
       dx = dy
       dy = temp
       key = 1
        }else
       key = 0
       e = 2*dy-dx

        for(i=0;i<dx;i++) {
       px = 0
       py = 0
       Plot(x,y)
       while(e>=0) {
        if(key==1) {
         x += s1
         px += s1
        }else {
         y += s2
         py += s2
        }
        e = e-2*dx
       }
       if(key==1)
        y += s2
       else
        x += s1
       e = e+2*dy
      }
     }

    function MoveTo(x,y) {
      Ox = Oy = -1
      xo = Math.round(x)
      yo = Math.round(y)
    }

    // 圆
    function Cir(x,y,r) {
      MoveTo(x+r,y)
      for(i=0;i<=360;i+=5) {
       LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
      }
    }

    // 弧形
    function Arc(x,y,r,a1,a2) {
      MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)
      for(i=a1;i<=a2;i++) {
       LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
      }
    }

    // 扇形
    function Pei(x,y,r,a1,a2) {
     MoveTo(x,y)
     for(var i=a1;i<=a2;i++) {
      LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
        }
        LineTo(x,y)
    }

    // 弹出扇形
    function PopPei(x,y,r,a1,a2) {
     dx = r*Math.cos((a1+(a2-a1)/2)*rad)/10
     dy = r*Math.sin((a1+(a2-a1)/2)*rad)/10
     x += dx
     y += dy
     MoveTo(x,y)
     for(var i=a1;i<=a2;i++) {
      LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)
        }
        LineTo(x,y)
    }

    // 矩形
 function Rect(x,y,w,h){
  MoveTo(x,y)
      LineTo(x+w,y)
      LineTo(x+w,y+h)
      LineTo(x,y+h)
      LineTo(x,y)
    }

    // 准星
    function zhunxing(x,y) {
         var ox = xo
      var oy = yo
      var oColor = color
         color = "#000000"
      Line(x-5,y,x+6,y)
      Line(x,y-6,x,y+5)
   print('<span style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')
      color = oColor
      xo = ox
      yo = oy
    }

    // 标注
    function biaozhuStr(x,y,s) {
     return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
    }

    function biaozhu(x,y,s,t) {
  var ox = xo
  var oy = yo
  var oColor = color
  point = "p01.gif"
      if(t==1) {
    print(biaozhuStr(x-5,y+6,"·"+s))
   }
   if(t==2) {
         print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))
      }
  color = oColor
  xo = ox
  yo = oy
    }

///具体调用
if(IE4) {

    // 基本图形
    color = "maroon"
    Cir(50,40,20)
    Arc(100,40,20,60,120)
    Pei(150,60,40,240,300)
    Rect(200,20,40,40)

    // 折线图
    color = "#FF0000"
    var jd = new Array(
     203,232,277,223,271,234,273,284,276,250,267,280
    )

    MoveTo(30,jd[0]-40)
    biaozhu(xo,yo,jd[0])
    for(i=1;i<jd.length;i++) {
     LineTo(i*30+30,jd[i]-40)
     biaozhu(xo,yo,jd[i],1)
    }

    color = "#C0C0C0"
    Line(30,140,i*30+30,140)
    Line(30,140,30,260)

    // 饼图
    color = "#00FF00"
    var gc = new Array(
        150,120,200,180,180
    )
    var s = 0
    var m = 0
    var n = 0
    for(i=0;i<gc.length;i++) {
     s +=gc[i]
        if(gc[i] > m) {
           m = gc[i]
           n = i
        }
    }
    var k = s/360
    var mm = 0
    var a =0
    for(i=0;i<gc.length;i++) {
       b = Math.round((gc[i]+mm)/k)
       if(i==n)
          PopPei(600,150,100,a,b)
       else
          Pei(600,150,100,a,b)
   
      biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)
      mm = mm+gc[i]
      a = b
    }

    // 十字标注
    MoveTo(280,20)
    zhunxing(xo,yo)

    }else {
     document.write("<p> </p><table bgcolor=#FF0000><tr><td><font color=#FFFF00>对不起!您的浏览器不能支持该页的某些功能,请换用IE4.0以上版本的浏览器!谢谢!</font></td></tr></table>")
    }
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值