管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用JavaScript绘图 ——JS2D函数集

<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%0A%2F******************%20JS2D%E5%87%BD%E6%95%B0%E9%9B%86%20%20*******************%20%0D%0A%0D%0A%20%20%E4%BD%9C%E8%80%85%EF%BC%9Aneweroica%20%20%20%202003-3-28%20%0D%0A%0D%0A%20%20CopyRight%20(C)%202003%20%0D%0A%0D%0A%20%20%E5%9C%A8%E5%BC%95%E7%94%A8%E6%88%96%E8%BD%AC%E8%BD%BD%E6%97%B6%E8%AF%B7%E4%BF%9D%E7%95%99%E6%AD%A4%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF%EF%BC%8C%E8%B0%A2%E8%B0%A2!!!%20%0D%0A%0D%0A%20%20%E6%9C%AC%E5%87%BD%E6%95%B0%E9%9B%86%E5%8F%AF%E4%BB%A5%E5%8D%95%E7%8B%AC%E5%AD%98%E6%88%90%E4%B8%80%E4%B8%AAjs%E6%96%87%E4%BB%B6%EF%BC%9A%22JS2D.js%22%20%0D%0A%0D%0A***************************************************%2F%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E7%82%B9%20**************%20%0D%0A%20%20x%2Cy%20%20%20%20%20%E7%82%B9%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20color%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A%20%20size%20%20%20%20%E5%A4%A7%E5%B0%8F%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawDot(x%2Cy%2Ccolor%2Csize)%7B%20%0D%0A%20%20document.write(%22%3Ctable%20border%3D'0'%20cellspacing%3D0%20cellpadding%3D0%3E%3Ctr%3E%3Ctd%20style%3D'position%3A%20absolute%3B%20left%3A%20%22%2B(x)%2B%22%3B%20top%3A%20%22%2B(y)%2B%22%3Bbackground-color%3A%20%22%2Bcolor%2B%22'%20width%3D%22%2Bsize%2B%22%20height%3D%22%2Bsize%2B%22%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%22)%20%0D%0A%7D%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E7%9B%B4%E7%BA%BF%20**************%20%0D%0A%20%20x1%2Cy1%20%20%20%E8%B5%B7%E7%82%B9%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20x2%2Cy2%20%20%20%E7%BB%88%E7%82%B9%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20color%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A%20%20size%20%20%20%20%E5%A4%A7%E5%B0%8F%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20style%20%20%20%E6%A0%B7%E5%BC%8F%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D0%20%20%20%20%E5%AE%9E%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D1%20%20%20%20%E8%99%9A%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D2%20%20%20%20%E8%99%9A%E5%AE%9E%E7%BA%BF%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawLine(x1%2Cy1%2Cx2%2Cy2%2Ccolor%2Csize%2Cstyle)%7B%20%0D%0A%20%20var%20i%3B%20%0D%0A%20%20var%20r%3DMath.floor(Math.sqrt((x2-x1)*(x2-x1)%2B(y2-y1)*(y2-y1)))%3B%20%0D%0A%20%20var%20theta%3DMath.atan((x2-x1)%2F(y2-y1))%3B%20%0D%0A%20%20if(((y2-y1)%3C0%26%26(x2-x1)%3E0)%7C%7C((y2-y1)%3C0%26%26(x2-x1)%3C0))%20%0D%0A%20%20%20%20theta%3DMath.PI%2Btheta%3B%20%0D%0A%20%20var%20dx%3DMath.sin(theta)%3B%2F%2Falert(dx)%20%0D%0A%20%20var%20dy%3DMath.cos(theta)%3B%20%0D%0A%20%20for(i%3D0%3Bi%3Cr%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20switch(style)%7B%20%0D%0A%20%20%20%20%20%20case%200%3A%20%0D%0A%20%20%20%20%20%20%20%20drawDot(x1%2Bi*dx%2Cy1%2Bi*dy%2Ccolor%2Csize)%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20case%201%3A%20%0D%0A%20%20%20%20%20%20%20%20i%2B%3Dsize*2%3B%20%0D%0A%20%20%20%20%20%20%20%20drawDot(x1%2Bi*dx%2Cy1%2Bi*dy%2Ccolor%2Csize)%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20case%202%3A%20%0D%0A%20%20%20%20%20%20%20%20if(Math.floor(i%2F4%2Fsize)%252%3D%3D0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20drawDot(x1%2Bi*dx%2Cy1%2Bi*dy%2Ccolor%2Csize)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20i%2B%3Dsize*2%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20drawDot(x1%2Bi*dx%2Cy1%2Bi*dy%2Ccolor%2Csize)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20default%3A%20%0D%0A%20%20%20%20%20%20%20%20drawDot(x1%2Bi*dx%2Cy1%2Bi*dy%2Ccolor%2Csize)%3B%20%0D%0A%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E5%AE%9E%E5%BF%83%E7%9F%A9%E5%BD%A2%20**************%20%0D%0A%20%20x1%2Cy1%20%20%20%E8%B5%B7%E7%82%B9%EF%BC%88%E7%9F%A9%E5%BD%A2%E5%B7%A6%E4%B8%8A%E8%A7%92%EF%BC%89%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20x2%2Cy2%20%20%20%E7%BB%88%E7%82%B9%EF%BC%88%E7%9F%A9%E5%BD%A2%E5%8F%B3%E4%B8%8B%E8%A7%92%EF%BC%89%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20color%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawFilledRect(x1%2Cy1%2Cx2%2Cy2%2Ccolor)%7B%20%0D%0A%20%20document.write(%22%3Ctable%20border%3D'0'%20cellspacing%3D0%20cellpadding%3D0%3E%3Ctr%3E%3Ctd%20style%3D'position%3A%20absolute%3B%20left%3A%20%22%2B(x1)%2B%22%3B%20top%3A%20%22%2B(y1)%2B%22%3Bbackground-color%3A%20%22%2Bcolor%2B%22'%20width%3D%22%2B(x2-x1)%2B%22%20height%3D%22%2B(y2-y1)%2B%22%3E%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%22)%20%0D%0A%7D%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E7%9F%A9%E5%BD%A2%20**************%20%0D%0A%20%20x1%2Cy1%20%20%20%E8%B5%B7%E7%82%B9%EF%BC%88%E7%9F%A9%E5%BD%A2%E5%B7%A6%E4%B8%8A%E8%A7%92%EF%BC%89%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20x2%2Cy2%20%20%20%E7%BB%88%E7%82%B9%EF%BC%88%E7%9F%A9%E5%BD%A2%E5%8F%B3%E4%B8%8B%E8%A7%92%EF%BC%89%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20color%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A%20%20size%20%20%20%20%E5%A4%A7%E5%B0%8F%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20style%20%20%20%E6%A0%B7%E5%BC%8F%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D0%20%20%20%20%E5%AE%9E%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D1%20%20%20%20%E8%99%9A%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D2%20%20%20%20%E8%99%9A%E5%AE%9E%E7%BA%BF%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawRect(x1%2Cy1%2Cx2%2Cy2%2Ccolor%2Csize%2Cstyle)%7B%20%0D%0A%20%20drawLine(x1%2Cy1%2Cx2%2Cy1%2Ccolor%2Csize%2Cstyle)%3B%20%0D%0A%20%20drawLine(x1%2Cy2%2Cx2%2Cy2%2Ccolor%2Csize%2Cstyle)%3B%20%0D%0A%20%20drawLine(x1%2Cy1%2Cx1%2Cy2%2Ccolor%2Csize%2Cstyle)%3B%20%0D%0A%20%20drawLine(x2%2Cy1%2Cx2%2Cy2%2Ccolor%2Csize%2Cstyle)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E6%A4%AD%E5%9C%86%20**************%20%0D%0A%20%20x%2Cy%20%20%20%20%20%20%20%20%20%E4%B8%AD%E5%BF%83%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20a%2Cb%20%20%20%20%20%20%20%20%20%E9%95%BF%E8%BD%B4%E5%92%8C%E7%9F%AD%E8%BD%B4%E7%9A%84%E9%95%BF%E5%BA%A6%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20color%20%20%20%20%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A%20%20size%20%20%20%20%20%20%20%20%E5%A4%A7%E5%B0%8F%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20precision%20%20%20%E8%BE%B9%E7%BC%98%E7%B2%BE%E7%BB%86%E5%BA%A6%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawOval(x%2Cy%2Ca%2Cb%2Ccolor%2Csize%2Cprecision)%7B%20%0D%0A%20%20var%20i%3B%20%0D%0A%20%20var%20iMax%3D2*Math.PI%3B%20%0D%0A%20%20var%20step%3D2*Math.PI%2F(precision*Math.sqrt(a*b)*4.5)%3B%20%0D%0A%20%20for(i%3D0%3Bi%3CiMax%3Bi%2B%3Dstep)%7B%20%0D%0A%20%20%20%20drawDot(x%2Ba*Math.cos(i)%2Cy%2Bb*Math.sin(i)%2Ccolor%2Csize)%3B%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F*************%20%E7%94%BB%E5%A4%9A%E8%BE%B9%E5%BD%A2%20**************%20%0D%0A%20%20x%2Cy%20%20%20%20%20%E4%B8%AD%E5%BF%83%E6%89%80%E5%9C%A8%E7%9A%84%E5%B1%8F%E5%B9%95%E5%9D%90%E6%A0%87%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20r%20%20%20%20%20%20%20%E5%A4%9A%E8%BE%B9%E5%BD%A2%E5%A4%96%E6%8E%A5%E5%9C%86%E5%8D%8A%E5%BE%84%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20n%20%20%20%20%20%20%20%E5%A4%9A%E8%BE%B9%E5%BD%A2%E7%9A%84%E8%BE%B9%E6%95%B0%20%0D%0A%20%20color%20%20%20%E9%A2%9C%E8%89%B2%EF%BC%88%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%80%BC%EF%BC%89%20%0D%0A%20%20size%20%20%20%20%E5%A4%A7%E5%B0%8F%EF%BC%88%E5%83%8F%E7%B4%A0%EF%BC%89%20%0D%0A%20%20style%20%20%20%E6%A0%B7%E5%BC%8F%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D0%20%20%20%20%E5%AE%9E%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D1%20%20%20%20%E8%99%9A%E7%BA%BF%20%0D%0A%20%20%20%20%20%20%20%20%20%20%3D2%20%20%20%20%E8%99%9A%E5%AE%9E%E7%BA%BF%20%0D%0A**********************************%2F%20%0D%0Afunction%20drawPoly(x%2Cy%2Cr%2Cn%2Ccolor%2Csize%2Cstyle)%7B%20%0D%0A%20%20var%20i%3B%20%0D%0A%20%20var%20theta%3DMath.PI%3B%20%0D%0A%20%20var%20x1%3Dx%2Cy1%3Dy-r%2Cx2%2Cy2%3B%20%0D%0A%20%20for(i%3D0%3Bi%3Cn%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20theta-%3D(2*Math.PI%2Fn)%3B%20%0D%0A%20%20%20%20x2%3Dx%2Br*Math.sin(theta)%3B%20%0D%0A%20%20%20%20y2%3Dy%2Br*Math.cos(theta)%3B%20%0D%0A%20%20%20%20drawLine(x1%2Cy1%2Cx2%2Cy2%2Ccolor%2Csize%2Cstyle)%3B%20%0D%0A%20%20%20%20x1%3Dx2%3B%20%0D%0A%20%20%20%20y1%3Dy2%3B%2F%2Falert(x1%2B%22%20%22%2By1)%20%0D%0A%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F%2F******************%20JS2D%E5%87%BD%E6%95%B0%E9%9B%86%E7%A4%BA%E4%BE%8B%20%20*******************%20%0D%0AdrawLine(20%2C20%2C300%2C20%2C%22%230000cc%22%2C2%2C0)%3B%20%0D%0AdrawLine(20%2C40%2C300%2C40%2C%22%230000cc%22%2C2%2C1)%3B%20%0D%0AdrawLine(20%2C60%2C300%2C60%2C%22%230000cc%22%2C2%2C2)%3B%20%0D%0AdrawFilledRect(20%2C80%2C300%2C200%2C%22009900%22)%3B%20%0D%0AdrawRect(20%2C220%2C220%2C320%2C%22ff0000%22%2C2%2C0)%3B%20%0D%0AdrawRect(240%2C220%2C440%2C320%2C%22ff0000%22%2C2%2C1)%3B%20%0D%0AdrawRect(460%2C220%2C660%2C320%2C%22ff0000%22%2C2%2C2)%3B%20%0D%0AdrawOval(250%2C450%2C120%2C50%2C%22006600%22%2C1%2C1)%3B%20%0D%0AdrawOval(250%2C650%2C120%2C120%2C%22006600%22%2C2%2C0.5)%3B%20%0D%0AdrawPoly(200%2C900%2C100%2C3%2C%22ff8800%22%2C2%2C0)%3B%20%0D%0AdrawPoly(400%2C900%2C100%2C4%2C%22ff8800%22%2C2%2C1)%3B%20%0D%0AdrawPoly(600%2C900%2C100%2C5%2C%22ff8800%22%2C2%2C2)%3B%20%0D%0AdrawPoly(200%2C1100%2C100%2C6%2C%22ff8800%22%2C2%2C0)%3B%20%0D%0AdrawPoly(400%2C1100%2C100%2C7%2C%22ff8800%22%2C2%2C1)%3B%20%0D%0AdrawPoly(600%2C1100%2C100%2C12%2C%22ff8800%22%2C2%2C2)%3B%20%0D%0A%3C%2Fscript%3E">

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

教程首页更多教程