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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS 文件大小判断的实现代码
有时候我们的图片上传等功能，需要验证客户端的图片大小，比较只能上传小于100K的图片，这里客户端先简单的验证下。
2010-04-04
javascript批量检查当图片不存在时则显示默认图片的代码
批量检查图片地址显示是不是有错误，在ie浏览器中是有当图片不存在时的onerror事件的，下面的代码即是非常不错的应用。
2008-09-09
一个javascript图片阅览组件
这阵子琢磨着做一个可扩展的“相册”，其实就是一个JS做的用来展示图片的组件。不过何为可扩展呢？
2010-11-11
javascript 图片轮换显示效果代码
图片轮换显示效果,学习js的朋友可以参考下。
2010-03-03
图片上传之前检查大小、尺寸、格式并预览的js代码
就是在客户端判断上传图片的大小，尺寸，并生成预览图，用JavaScript实现的啊
2008-10-10
js实现图片等比缩略显示支持IE/FF
js实现图片等比缩略显示支持IE/FF...
2007-02-02
用javascript实现旋转图片效果的代码
用javascript实现旋转图片效果的代码...
2007-11-11
纯JS图片批量预加载技术代码
一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。
2009-11-11
SuperSlide2实现图片滚动特效
SuperSlide2,实现图片滚动，感觉很强大，这里只是简单的演示其中一种类型，想看更多类型的话，可以去http://www.superslide2.com 查看，
2014-06-06
多图展示滑动过渡效果
多图展示滑动过渡效果...
2006-12-12

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

JavaScript 绘图代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具