求一些经典的javascript画图函数

我贴的是我收藏的,谁是原创就不知道了<html>
<head>
<title>JavaScript绘图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")var xo=0
var yo=0
var Ox = -1
var Oy = -1var 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
}
</script>
</head><body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td>
</tr>
<tr>
<td width="100%" style="font-size: 12pt; color: #008000" class="t2">
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td>
</tr>
</table><script>
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></body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<title>JavaScript绘图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
IE4 = ! (navigator.appVersion.charAt(0) < "4" || navigator.appName == "Netscape")var xo=0
var yo=0
var Ox = -1
var Oy = -1var 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
}
</script>
</head><body>
<table border="0" width="100%">
<tr>
<td width="100%" style="font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td>
</tr>
<tr>
<td width="100%" style="font-size: 12pt; color: #008000" class="t2">
如果需要在网页上提供图形化的资料，通常是将其制作成图片，但这样一来网络上的开销就太大了。有什么办法呢？这里向你提供一组JavaScript函数，来解决这一问题。虽然简单了点，但是对画点线图来说还是绰绰有余的！</td>
</tr>
</table><script>
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></body>
</html>
加上
<body onselectstart="return false;">不然选择的时候就像噩梦
又找到一个<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=canvas></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
点
<span style="background-color:red;width:1px;height:1px;font-size:1px;"> </span></body>
</html>