Javascript根本不提供WEB页绘图功能,如果客户端使用的是Windows操作系统,则推荐使用DirectAnimation控件来画图,因为Windows操作系统中均已含有此控件而不需要下载。
应该有一些技巧吧 , 比如 :
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 ;
}
也可以用来画横线及竖线 , 难道就没有画斜线和曲线的技巧了吗 ?
我一直相信有 .
karma(无为) 大师 , 能不能解释一下 SVG & VML , 并做一下示范 ?
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>
谢谢 , 似乎 JavaScript 也只能这样了 .