这个问题我也问过(见下方),我们再接再厉吧......
主 题:JavaScript 图形学
作 者:eishn
所属论坛:Javascript
问题点数:20
回复次数:11
发表时间:2001-10-5 16:48:05
怎样用 JavaScript 绘制彩色的斜线和曲线 ?
怎样用 JavaScript 给实心体填上彩色 ?
回复贴子:
回复人: eishn(昏迷的菜鸟) (2001-10-5 22:53:08) 得0分
不至于没有方法吧 ?
回复人: eishn(昏迷的菜鸟) (2001-10-5 23:45:56) 得0分
如果 JavaScript 能实现此功能 , 将会使图片的使用量大量减少 , 加快页面完全下载速度 .
回复人: w8u(晌马) (2001-10-6 15:21:02) 得0分
gz
回复人: abent(阿木一头) (2001-10-6 19:01:57) 得0分
Javascript根本不提供WEB页绘图功能,如果客户端使用的是Windows操作系统,则推荐使用DirectAnimation控件来画图,因为Windows操作系统中均已含有此控件而不需要下载。
回复人: karma(无为) (2001-10-6 21:39:20) 得0分
用SVG或VML
回复人: eishn(昏迷的菜鸟) (2001-10-6 21:52:42) 得0分
应该有一些技巧吧 , 比如 :
function Box(X1,Y1,X2,Y2,Color)
{
var Width = X2 - X1 ;
var Height = Y2 - Y1 ;
write('<DIV style = "font-size:0;border:0;background:'+Color+';left:'+X1+';top:'+Y1+';width:'+Width+';height:'+Height+'"> </DIV>') ;
return ;
}
也可以用来画横线及竖线 , 难道就没有画斜线和曲线的技巧了吗 ?
我一直相信有 .
回复人: eishn(昏迷的菜鸟) (2001-10-6 21:55:41) 得0分
karma(无为) 大师 , 能不能解释一下 SVG & VML , 并做一下示范 ?
回复人: snwcwt(风舞影天) (2001-10-6 22:24:46) 得0分
JS要画斜线和曲线是可以,不过,速度比用图片更慢,没有意义。
回复人: eishn(昏迷的菜鸟) (2001-10-6 22:34:32) 得0分
可以把方法说一说吗 ?
速度慢不要紧 .
回复人: karma(无为) (2001-10-7 11:12:01) 得20分
1. Drawing a line using Javascript and table:
<html>
<head>
<style type="text/css">
TD {width:1; height:1}
</style>
</head>
<body>
<table id="tbl" cellspacing="0" cellpadding="0" border="0">
<script language="javascript">
for (var i=0; i < 50; i++)
{
document.write ("<tr>");
for (var j=0; j < 50; j++)
document.write("<td></td>");
document.write ("</tr>");
}
</script>
</table>
<script language="javascript">
for (var i=0; i < 50; i++)
{
tbl.rows[49-i].cells[i].style.backgroundColor="red";
}
</script>
</body>
</html>2. Drawing a circle with SVG (you need to save it as a file with file extensin as .svg and a SVG viewer to see it):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="500" height="500">
<ellipse cx="301" cy="286" rx="149" ry="151" style="stroke-width:20;
stroke-opacity:1;stroke:rgb(0,0,0);fill-opacity:1;
fill:rgb(255,255,0);opacity:1"/>
</svg>3. Drawing a polyline with VML:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:polyline points = "18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt" strokecolor = "red" strokeweight =
"2pt">
</v:polyline>
</body>
</html>
回复人: eishn(昏迷的菜鸟) (2001-10-9 12:44:43) 得0分
谢谢 , 似乎 JavaScript 也只能这样了 .
主 题:JavaScript 图形学
作 者:eishn
所属论坛:Javascript
问题点数:20
回复次数:11
发表时间:2001-10-5 16:48:05
怎样用 JavaScript 绘制彩色的斜线和曲线 ?
怎样用 JavaScript 给实心体填上彩色 ?
回复贴子:
回复人: eishn(昏迷的菜鸟) (2001-10-5 22:53:08) 得0分
不至于没有方法吧 ?
回复人: eishn(昏迷的菜鸟) (2001-10-5 23:45:56) 得0分
如果 JavaScript 能实现此功能 , 将会使图片的使用量大量减少 , 加快页面完全下载速度 .
回复人: w8u(晌马) (2001-10-6 15:21:02) 得0分
gz
回复人: abent(阿木一头) (2001-10-6 19:01:57) 得0分
Javascript根本不提供WEB页绘图功能,如果客户端使用的是Windows操作系统,则推荐使用DirectAnimation控件来画图,因为Windows操作系统中均已含有此控件而不需要下载。
回复人: karma(无为) (2001-10-6 21:39:20) 得0分
用SVG或VML
回复人: eishn(昏迷的菜鸟) (2001-10-6 21:52:42) 得0分
应该有一些技巧吧 , 比如 :
function Box(X1,Y1,X2,Y2,Color)
{
var Width = X2 - X1 ;
var Height = Y2 - Y1 ;
write('<DIV style = "font-size:0;border:0;background:'+Color+';left:'+X1+';top:'+Y1+';width:'+Width+';height:'+Height+'"> </DIV>') ;
return ;
}
也可以用来画横线及竖线 , 难道就没有画斜线和曲线的技巧了吗 ?
我一直相信有 .
回复人: eishn(昏迷的菜鸟) (2001-10-6 21:55:41) 得0分
karma(无为) 大师 , 能不能解释一下 SVG & VML , 并做一下示范 ?
回复人: snwcwt(风舞影天) (2001-10-6 22:24:46) 得0分
JS要画斜线和曲线是可以,不过,速度比用图片更慢,没有意义。
回复人: eishn(昏迷的菜鸟) (2001-10-6 22:34:32) 得0分
可以把方法说一说吗 ?
速度慢不要紧 .
回复人: karma(无为) (2001-10-7 11:12:01) 得20分
1. Drawing a line using Javascript and table:
<html>
<head>
<style type="text/css">
TD {width:1; height:1}
</style>
</head>
<body>
<table id="tbl" cellspacing="0" cellpadding="0" border="0">
<script language="javascript">
for (var i=0; i < 50; i++)
{
document.write ("<tr>");
for (var j=0; j < 50; j++)
document.write("<td></td>");
document.write ("</tr>");
}
</script>
</table>
<script language="javascript">
for (var i=0; i < 50; i++)
{
tbl.rows[49-i].cells[i].style.backgroundColor="red";
}
</script>
</body>
</html>2. Drawing a circle with SVG (you need to save it as a file with file extensin as .svg and a SVG viewer to see it):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="500" height="500">
<ellipse cx="301" cy="286" rx="149" ry="151" style="stroke-width:20;
stroke-opacity:1;stroke:rgb(0,0,0);fill-opacity:1;
fill:rgb(255,255,0);opacity:1"/>
</svg>3. Drawing a polyline with VML:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:polyline points = "18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt" strokecolor = "red" strokeweight =
"2pt">
</v:polyline>
</body>
</html>
回复人: eishn(昏迷的菜鸟) (2001-10-9 12:44:43) 得0分
谢谢 , 似乎 JavaScript 也只能这样了 .
<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 = -1var rad = Math.PI/180
var maxY = 400
var color = "#00ff00"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 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
}
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)
}</script>
</head>
<body>
<script>color = "maroon"
Cir(50,40,20)
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)
</script>
</body>
</html>
真正的勇士﹗(沒稱您是武士是因為我一直以為只有鬼子才自稱武士)
真正的勇士﹗﹗﹗
不過這樣做很浪費資源﹐請問有沒有一個簡單一點的。
dot = "<img width=1 height=1>";
然后的工作就要看你计算机图形学的功底了:)