Home > Developer > JavaScript
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)
}
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)
}
Rectangular
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)
}
//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 style= position:absolute;font-size:10pt;left: ' + (x+5) + '; Top: ' + Orgy (y+5) + '; ' >[' +x+ ', ' +y+ ']</span> ')
color = ocolor
xo = Ox
yo = Oy
}
//callout
Function Biaozhustr (x,y,s) { Br>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>
<body>
<table border= "0" width= "100%" >
<tr>
<TD width= "100%" style= "font-family: Founder Shu body; font-size:18pt; Color: #FF0000 "class=" T1 ">javascript drawing </td>
</tr>
<tr>
<TD width= "100%" style= "font-family: Young round; font-size:12pt; Color: #008000 "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,40,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*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)
Pie chart
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
}
Cross Callout
MoveTo (280,20)
Zhunxing (Xo,yo)
}else {
document.write ("<p> </p><table bgcolor= #FF0000 ><tr><td><font color= #FFFF00 > I am 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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
