首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > JavaScript 绘图

JavaScript 绘图代码

2008-12-20 13:19:48 作者：

JavaScript绘制各种图形

<html> 
<head> 
<title>JavaScript绘图</title> 
<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 
} 
</script> 
</head>

<body> 
<table border="0" width="100%"> 
<tr> 
<td width="100%" style="font-family: 方正舒体; font-size: 18pt; color: #FF0000" class="t1">JavaScript绘图</td> 
</tr> 
<tr> 
<td width="100%" style="font-family: 幼圆; 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-40) 
biaozhu(xo,yo,jd,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 
if(gc > m) { 
m = gc 
n = i 
} 
} 
var k = s/360 
var mm = 0 
var a =0 
for(i=0;i<gc.length;i++) { 
b = Math.round((gc+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/s*100)+"%",2) 
mm = mm+gc 
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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript 绘图代码

您可能感兴趣的文章: