<ptml> <pead> <title>javascript Drawing </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 = var color = "Red" function print (str) {document.write (str)} function or GY (y) {return maxy-y} function Outplot (x,y,w,h) {print (' <span +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 = Mat H.abs (W)} if (h<0) {y + = h = Math.Abs (h)} if (w<1) w=1 if (h<1) h=1 Outplot (X,y,math.round (w), Math.roun D (h))} function LineTo (x,y) {line (xo,yo,x,y)} function sign (n) {if (n>0) return 1 if (n<0) return-1 R Eturn 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) {S Howline (x1,y1,x2-x1,y2-y1) return} if (dx>dy) {temp = dx dx = dy dy = Temp key = 1}else key = 0 E = 2*dy-d X 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)}//Round 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)} }//Arc 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)} }//Sector 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)}//Eject fan 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)}//Rectangle function Rec T (x,y,w,h) {MoveTo (x,y) LineTo (x+w,y) LineTo (x+w,y+h) LineTo (x,y+h) LineTo (x,y)}//Star 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 + (x+5) + '; Top: ' +orgy (y+5) + '; ' >[' +x+ ', ' +y+ ']</span> ') color = ocolor xo = Ox yo = Oy}//Callout function Biaozhustr (x,y,s) {return ' <SP An +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))} color = Ocolor xo = Ox yo = Oy} </script> </pead> <body> & Lt;table border= "0" width= "100%" > <tr> <td width= "100%" class= "T1" >javascript drawing </td> </tr> <tr> <td width= "100%" class= "T2" > If you need to provide graphical information on a Web page, you usually make it into a picture, but the overhead on the network is too great. What's the solution? This provides you with a set of JavaScript functions to solve this problem. Although the point is simple, but it is more than sufficient to draw the point line picture! </td> </tr> </table> <script> if (IE4) {//basic graphics color = "Maroon" Cir (50,40,20) ARC (100,4 0,20,60,120) Pei (150,60,40,240,300) Rect (200,20,40,40)//Line chart 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*3 0+30,jd-40) Biaozhu (xo,yo,jd,1)} color = "#C0C0C0" line (30,140,i*30+30,140) line (30,140,30,260)//pie chart color = "#0 0ff00 "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 = Ma Th.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}//Cross callout MoveTo (280,20) zhunxing (xo,yo)}else {document.write ("<p> </p& Gt;<table bgcolor= #FF0000 ><tr><td><font color= #FFFF00 > Sorry! Your browser does not support some of the features of the page, please switch to IE4.0 above version of the browser! Thank you! </font></td></tr></table> ")} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
