87,996
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
catyycsdn 2002-04-30
- 打赏
- 举报
weidegong(weidegong)的核心:
<div style='position:absolute;left:21;top:21;height:1;width:1;font-size:1px;background-color:black'></div>
<div style='position:absolute;left:22;top:22;height:1;width:1;font-size:1px;background-color:black'></div>
<div style='position:absolute;left:23;top:23;height:1;width:1;font-size:1px;background-color:black'></div>
<div style='position:absolute;left:21;top:21;height:1;width:1;font-size:1px;background-color:black'></div>
<div style='position:absolute;left:22;top:22;height:1;width:1;font-size:1px;background-color:black'></div>
<div style='position:absolute;left:23;top:23;height:1;width:1;font-size:1px;background-color:black'></div>
catyycsdn 2002-04-24
- 打赏
- 举报
找到了!一起帖上:
<SCRIPT LANGUAGE=javascript>
<!--
function onloadImg(imgFileName){
var objImg = document.createElement("IMG")
objImg.src=imgFileName;
imgDiv.appendChild(objImg)
}//-->
</SCRIPT>
</HEAD>
<BODY onload="onloadImg('tr.gif')">
<div id="imgDiv"></div>
</BODY>
<SCRIPT LANGUAGE=javascript>
<!--
function onloadImg(imgFileName){
var objImg = document.createElement("IMG")
objImg.src=imgFileName;
imgDiv.appendChild(objImg)
}//-->
</SCRIPT>
</HEAD>
<BODY onload="onloadImg('tr.gif')">
<div id="imgDiv"></div>
</BODY>
catyycsdn 2002-04-24
- 打赏
- 举报
刚爬起来,又跌倒:(
怎么样动态创建IMG,无法预知要画多少条线:(
----------------------------------------------
定位可以在STYLE中写呀?
怎么样动态创建IMG,无法预知要画多少条线:(
----------------------------------------------
定位可以在STYLE中写呀?
catyycsdn 2002-04-24
- 打赏
- 举报
QQ
linhaibo 2002-04-24
- 打赏
- 举报
VML可以做到。。。
刚好我最近整理了一下 VML 资料,有空瞧瞧..
http://61.154.29.214:81/share/vml/
刚好我最近整理了一下 VML 资料,有空瞧瞧..
http://61.154.29.214:81/share/vml/
weidegong 2002-04-24
- 打赏
- 举报
没有仔细看，胡乱贴个代码：）
<html>
<head>
<title>JavaScript繪圖--jun_bai@sohu.com</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)
// 折線圖
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>
<html>
<head>
<title>JavaScript繪圖--jun_bai@sohu.com</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)
// 折線圖
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>
catyycsdn 2002-04-24
- 打赏
- 举报
方法：
imgDiv.removeChild(imgDiv.children(0));//img是DIV的ID
------------------------------------
哦，结贴了，捧场有分
我QQ：69937616 有机会交流交流
imgDiv.removeChild(imgDiv.children(0));//img是DIV的ID
------------------------------------
哦，结贴了，捧场有分
我QQ：69937616 有机会交流交流
catyycsdn 2002-04-24
- 打赏
- 举报
有没有人知道怎样释放掉刚才创建的IMG?
mfkjl 2002-04-24
- 打赏
- 举报
gz
catyycsdn 2002-04-24
- 打赏
- 举报
定不了位了 。。。 ：（
孟子E章 2002-04-23
- 打赏
- 举报
div放透明的图
catyycsdn 2002-04-23
- 打赏
- 举报
?
我找到方法了,自己说说:
(这是完全在客户端执行的)
网页IMG控件没有提供类似高级语言中的画线功能,所以要骗过视觉,在DIV上显示线条GIF,通过指定这个GIF显示的坐标和显示宽度达到"画线的效果".
(顺便说说有服务端配合的情况)
服务端动态生成一副带线图象,发给客户端的IMG显示.
-----------------------------
美洲豹说VML可以做到, 请说说思想,我发分:)
我找到方法了,自己说说:
(这是完全在客户端执行的)
网页IMG控件没有提供类似高级语言中的画线功能,所以要骗过视觉,在DIV上显示线条GIF,通过指定这个GIF显示的坐标和显示宽度达到"画线的效果".
(顺便说说有服务端配合的情况)
服务端动态生成一副带线图象,发给客户端的IMG显示.
-----------------------------
美洲豹说VML可以做到, 请说说思想,我发分:)
eojessie 2002-04-23
- 打赏
- 举报
同意孟子
不过还要定位
不过还要定位
catyycsdn 2002-04-19
- 打赏
- 举报
必须是<img>
linhaibo 2002-04-19
- 打赏
- 举报
使用VML 就可以做到...
