JS画图，（矩形，曲线，圆等）

最新推荐文章于 2024-09-17 14:53:18 发布

加油馒头

最新推荐文章于 2024-09-17 14:53:18 发布

阅读量1.4w

点赞数 1

分类专栏： js 文章标签： function javascript plot 浏览器 class 图形

本文链接：https://blog.csdn.net/jaylongli/article/details/4797091

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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)
Line(0,0,20,20)
//   折线图
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)

//   饼图
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
}

//   十字标注
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>