当前位置：首页 -> 技术开发 -> 其他相关 -> 一组JavaScript绘图函数

一组JavaScript绘图函数

时间： 2021-07-31 作者：daque

<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[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>

一组JavaScript绘图函数

相关推荐

推荐下载

热门阅览

最新排行