资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript 绘图代码
<html> <head> <title>JavaScript绘图</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0AIE4%20%3D%20!%20(navigator.appVersion.charAt(0)%20%3C%20%224%22%20%7C%7C%20navigator.appName%20%3D%3D%20%22Netscape%22)%20%0D%0A%0D%0Avar%20xo%3D0%20%0D%0Avar%20yo%3D0%20%0D%0Avar%20Ox%20%3D%20-1%20%0D%0Avar%20Oy%20%3D%20-1%20%0D%0A%0D%0Avar%20rad%20%3D%20Math.PI%2F180%20%0D%0Avar%20maxY%20%3D%20400%20%0D%0Avar%20color%20%3D%20%22red%22%20%0D%0A%0D%0Afunction%20print(str)%20%7B%20%0D%0Adocument.write(str)%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20orgY(y)%20%7B%20%0D%0Areturn%20maxY-y%20%0D%0A%7D%20%0D%0Afunction%20outPlot(x%2Cy%2Cw%2Ch)%20%7B%20%0D%0Aprint('%3Cspan%20style%3D%22position%3Aabsolute%3Bleft%3A'%2Bx%2B'%3Btop%3A'%2By%2B'%3Bheight%3A'%2Bh%2B'%3Bwidth%3A'%2Bw%2B'%3Bfont-size%3A1px%3Bbackground-color%3A'%2Bcolor%2B'%22%3E%3C%2Fspan%3E')%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20Plot(x%2Cy)%20%7B%20%0D%0AoutPlot(x%2Cy%2C1%2C1)%20%0D%0Aif(Ox%3E%3D0%20%7C%7C%20Oy%3E%3D0)%20%7B%20%0D%0AShowLine(Ox%2COy%2Cx-Ox%2Cy-Oy)%20%0D%0A%7D%20%0D%0AOx%20%3D%20x%20%0D%0AOy%20%3D%20y%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20ShowLine(x%2Cy%2Cw%2Ch)%20%7B%20%0D%0Aif(w%3C0)%20%7B%20%0D%0Ax%20%2B%3D%20w%20%0D%0Aw%20%3D%20Math.abs(w)%20%0D%0A%7D%20%0D%0Aif(h%3C0)%20%7B%20%0D%0Ay%20%2B%3D%20h%20%0D%0Ah%20%3D%20Math.abs(h)%20%0D%0A%7D%20%0D%0Aif(w%3C1)%20w%3D1%20%0D%0Aif(h%3C1)%20h%3D1%20%0D%0AoutPlot(x%2Cy%2CMath.round(w)%2CMath.round(h))%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20LineTo(x%2Cy)%20%7B%20%0D%0ALine(xo%2Cyo%2Cx%2Cy)%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20sign(n)%20%7B%20%0D%0Aif(n%3E0)%20%0D%0Areturn%201%20%0D%0Aif(n%3C0)%20%0D%0Areturn%20-1%20%0D%0Areturn%20n%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20Line(x1%2Cy1%2Cx2%2Cy2)%20%7B%20%0D%0Ax2%20%3D%20Math.round(x2)%20%0D%0Ay2%20%3D%20Math.round(y2)%20%0D%0Axo%20%3D%20x2%20%0D%0Ayo%20%3D%20y2%20%0D%0Ay1%20%3D%20orgY(y1)%20%0D%0Ay2%20%3D%20orgY(y2)%20%0D%0Avar%20str%20%3D%20%22%22%20%0D%0Avar%20i%3D0%20%0D%0A%0D%0Avar%20x%20%3D%20x1%20%0D%0Avar%20y%20%3D%20y1%20%0D%0Adx%20%3D%20Math.abs(x2-x1)%20%0D%0Ady%20%3D%20Math.abs(y2-y1)%20%0D%0As1%20%3D%20sign(x2-x1)%20%0D%0As2%20%3D%20sign(y2-y1)%20%0D%0A%0D%0Aif(dx%3D%3D0%20%7C%7C%20dy%3D%3D0)%20%7B%20%0D%0AShowLine(x1%2Cy1%2Cx2-x1%2Cy2-y1)%20%0D%0Areturn%20%0D%0A%7D%20%0D%0A%0D%0Aif(dx%3Edy)%20%7B%20%0D%0Atemp%20%3D%20dx%20%0D%0Adx%20%3D%20dy%20%0D%0Ady%20%3D%20temp%20%0D%0Akey%20%3D%201%20%0D%0A%7Delse%20%0D%0Akey%20%3D%200%20%0D%0Ae%20%3D%202*dy-dx%20%0D%0A%0D%0Afor(i%3D0%3Bi%3Cdx%3Bi%2B%2B)%20%7B%20%0D%0Apx%20%3D%200%20%0D%0Apy%20%3D%200%20%0D%0APlot(x%2Cy)%20%0D%0Awhile(e%3E%3D0)%20%7B%20%0D%0Aif(key%3D%3D1)%20%7B%20%0D%0Ax%20%2B%3D%20s1%20%0D%0Apx%20%2B%3D%20s1%20%0D%0A%7Delse%20%7B%20%0D%0Ay%20%2B%3D%20s2%20%0D%0Apy%20%2B%3D%20s2%20%0D%0A%7D%20%0D%0Ae%20%3D%20e-2*dx%20%0D%0A%7D%20%0D%0Aif(key%3D%3D1)%20%0D%0Ay%20%2B%3D%20s2%20%0D%0Aelse%20%0D%0Ax%20%2B%3D%20s1%20%0D%0Ae%20%3D%20e%2B2*dy%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20MoveTo(x%2Cy)%20%7B%20%0D%0AOx%20%3D%20Oy%20%3D%20-1%20%0D%0Axo%20%3D%20Math.round(x)%20%0D%0Ayo%20%3D%20Math.round(y)%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E5%9C%86%20%0D%0Afunction%20Cir(x%2Cy%2Cr)%20%7B%20%0D%0AMoveTo(x%2Br%2Cy)%20%0D%0Afor(i%3D0%3Bi%3C%3D360%3Bi%2B%3D5)%20%7B%20%0D%0ALineTo(r*Math.cos(i*rad)%2Bx%2Cr*Math.sin(i*rad)%2By)%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20%E5%BC%A7%E5%BD%A2%20%0D%0Afunction%20Arc(x%2Cy%2Cr%2Ca1%2Ca2)%20%7B%20%0D%0AMoveTo(r*Math.cos(a1*rad)%2Bx%2Cr*Math.sin(a1*rad)%2By)%20%0D%0Afor(i%3Da1%3Bi%3C%3Da2%3Bi%2B%2B)%20%7B%20%0D%0ALineTo(r*Math.cos(i*rad)%2Bx%2Cr*Math.sin(i*rad)%2By)%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20%E6%89%87%E5%BD%A2%20%0D%0Afunction%20Pei(x%2Cy%2Cr%2Ca1%2Ca2)%20%7B%20%0D%0AMoveTo(x%2Cy)%20%0D%0Afor(var%20i%3Da1%3Bi%3C%3Da2%3Bi%2B%2B)%20%7B%20%0D%0ALineTo(r*Math.cos(i*rad)%2Bx%2Cr*Math.sin(i*rad)%2By)%20%0D%0A%7D%20%0D%0ALineTo(x%2Cy)%20%0D%0A%7D%20%0D%0A%2F%2F%20%E5%BC%B9%E5%87%BA%E6%89%87%E5%BD%A2%20%0D%0Afunction%20PopPei(x%2Cy%2Cr%2Ca1%2Ca2)%20%7B%20%0D%0Adx%20%3D%20r*Math.cos((a1%2B(a2-a1)%2F2)*rad)%2F10%20%0D%0Ady%20%3D%20r*Math.sin((a1%2B(a2-a1)%2F2)*rad)%2F10%20%0D%0Ax%20%2B%3D%20dx%20%0D%0Ay%20%2B%3D%20dy%20%0D%0AMoveTo(x%2Cy)%20%0D%0Afor(var%20i%3Da1%3Bi%3C%3Da2%3Bi%2B%2B)%20%7B%20%0D%0ALineTo(r*Math.cos(i*rad)%2Bx%2Cr*Math.sin(i*rad)%2By)%20%0D%0A%7D%20%0D%0ALineTo(x%2Cy)%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E7%9F%A9%E5%BD%A2%20%0D%0Afunction%20Rect(x%2Cy%2Cw%2Ch)%20%7B%20%0D%0AMoveTo(x%2Cy)%20%0D%0ALineTo(x%2Bw%2Cy)%20%0D%0ALineTo(x%2Bw%2Cy%2Bh)%20%0D%0ALineTo(x%2Cy%2Bh)%20%0D%0ALineTo(x%2Cy)%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E5%87%86%E6%98%9F%20%0D%0Afunction%20zhunxing(x%2Cy)%20%7B%20%0D%0Avar%20ox%20%3D%20xo%20%0D%0Avar%20oy%20%3D%20yo%20%0D%0Avar%20oColor%20%3D%20color%20%0D%0Acolor%20%3D%20%22%23000000%22%20%0D%0ALine(x-5%2Cy%2Cx%2B6%2Cy)%20%0D%0ALine(x%2Cy-6%2Cx%2Cy%2B5)%20%0D%0Aprint('%3Cspan%20style%3D%22position%3Aabsolute%3Bfont-size%3A10pt%3Bleft%3A'%2B(x%2B5)%2B'%3Btop%3A'%2BorgY(y%2B5)%2B'%3B%22%3E%5B'%2Bx%2B'%2C'%2By%2B'%5D%3C%2Fspan%3E')%20%0D%0Acolor%20%3D%20oColor%20%0D%0Axo%20%3D%20ox%20%0D%0Ayo%20%3D%20oy%20%0D%0A%7D%20%0D%0A%2F%2F%20%E6%A0%87%E6%B3%A8%20%0D%0Afunction%20biaozhuStr(x%2Cy%2Cs)%20%7B%20%0D%0Areturn%20'%3Cspan%20style%3D%22position%3Aabsolute%3Bfont-size%3A10pt%3Bleft%3A'%2Bx%2B'%3Btop%3A'%2BorgY(y)%2B'%3B%22%3E'%2Bs%2B'%3C%2Fspan%3E'%20%0D%0A%7D%20%0D%0Afunction%20biaozhu(x%2Cy%2Cs%2Ct)%20%7B%20%0D%0Avar%20ox%20%3D%20xo%20%0D%0Avar%20oy%20%3D%20yo%20%0D%0Avar%20oColor%20%3D%20color%20%0D%0Apoint%20%3D%20%22p01.gif%22%20%0D%0Aif(t%3D%3D1)%20%7B%20%0D%0Aprint(biaozhuStr(x-5%2Cy%2B6%2C%22%C2%B7%22%2Bs))%20%0D%0A%7D%20%0D%0Aif(t%3D%3D2)%20%7B%20%0D%0Aprint(biaozhuStr(xo%2Bx*Math.cos(y*rad)-10%2Cyo%2Bx*Math.sin(y*rad)%2Cs))%20%0D%0A%7D%20%0D%0Acolor%20%3D%20oColor%20%0D%0Axo%20%3D%20ox%20%0D%0Ayo%20%3D%20oy%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Aif(IE4)%20%7B%20%0D%0A%0D%0A%2F%2F%20%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%20%0D%0Acolor%20%3D%20%22maroon%22%20%0D%0ACir(50%2C40%2C20)%20%0D%0AArc(100%2C40%2C20%2C60%2C120)%20%0D%0APei(150%2C60%2C40%2C240%2C300)%20%0D%0ARect(200%2C20%2C40%2C40)%20%0D%0A%0D%0A%2F%2F%20%E6%8A%98%E7%BA%BF%E5%9B%BE%20%0D%0Acolor%20%3D%20%22%23FF0000%22%20%0D%0Avar%20jd%20%3D%20new%20Array(%20%0D%0A203%2C232%2C277%2C223%2C271%2C234%2C273%2C284%2C276%2C250%2C267%2C280%20%0D%0A)%20%0D%0AMoveTo(30%2Cjd%5B0%5D-40)%20%0D%0Abiaozhu(xo%2Cyo%2Cjd%5B0%5D)%20%0D%0Afor(i%3D1%3Bi%3Cjd.length%3Bi%2B%2B)%20%7B%20%0D%0ALineTo(i*30%2B30%2Cjd-40)%20%0D%0Abiaozhu(xo%2Cyo%2Cjd%2C1)%20%0D%0A%7D%20%0D%0Acolor%20%3D%20%22%23C0C0C0%22%20%0D%0ALine(30%2C140%2Ci*30%2B30%2C140)%20%0D%0ALine(30%2C140%2C30%2C260)%20%0D%0A%0D%0A%2F%2F%20%E9%A5%BC%E5%9B%BE%20%0D%0Acolor%20%3D%20%22%2300FF00%22%20%0D%0Avar%20gc%20%3D%20new%20Array(%20%0D%0A150%2C120%2C200%2C180%2C180%20%0D%0A)%20%0D%0Avar%20s%20%3D%200%20%0D%0Avar%20m%20%3D%200%20%0D%0Avar%20n%20%3D%200%20%0D%0Afor(i%3D0%3Bi%3Cgc.length%3Bi%2B%2B)%20%7B%20%0D%0As%20%2B%3Dgc%20%0D%0Aif(gc%20%3E%20m)%20%7B%20%0D%0Am%20%3D%20gc%20%0D%0An%20%3D%20i%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20k%20%3D%20s%2F360%20%0D%0Avar%20mm%20%3D%200%20%0D%0Avar%20a%20%3D0%20%0D%0Afor(i%3D0%3Bi%3Cgc.length%3Bi%2B%2B)%20%7B%20%0D%0Ab%20%3D%20Math.round((gc%2Bmm)%2Fk)%20%0D%0Aif(i%3D%3Dn)%20%0D%0APopPei(600%2C150%2C100%2Ca%2Cb)%20%0D%0Aelse%20%0D%0APei(600%2C150%2C100%2Ca%2Cb)%20%0D%0Abiaozhu(60%2Ca%2B(b-a)%2F2%2CMath.round(gc%2Fs*100)%2B%22%25%22%2C2)%20%0D%0Amm%20%3D%20mm%2Bgc%20%0D%0Aa%20%3D%20b%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%20%E5%8D%81%E5%AD%97%E6%A0%87%E6%B3%A8%20%0D%0AMoveTo(280%2C20)%20%0D%0Azhunxing(xo%2Cyo)%20%0D%0A%0D%0A%7Delse%20%7B%20%0D%0Adocument.write(%22%3Cp%3E%20%3C%2Fp%3E%3Ctable%20bgcolor%3D%23FF0000%3E%3Ctr%3E%3Ctd%3E%3Cfont%20color%3D%23FFFF00%3E%E5%AF%B9%E4%B8%8D%E8%B5%B7%EF%BC%81%E6%82%A8%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E8%83%BD%E6%94%AF%E6%8C%81%E8%AF%A5%E9%A1%B5%E7%9A%84%E6%9F%90%E4%BA%9B%E5%8A%9F%E8%83%BD%EF%BC%8C%E8%AF%B7%E6%8D%A2%E7%94%A8IE4.0%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%81%E8%B0%A2%E8%B0%A2%EF%BC%81%3C%2Ffont%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%22)%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程