js 画图，100分汇报，通过立即结贴。

//实心椭圆
function SolidEllipse(centreX, centreY, longRadii, shortRadii, precision, color){ var o = document.createElement('<span style="color:' + color + ';"></span>');
if(isNaN(centreX) || isNaN(centreY) || isNaN(longRadii) || isNaN(shortRadii) || isNaN(precision) || o.style.color == ""){
o = null;
alert(' 参数不正确，正确的参数格式为：SolidEllipse(a，b，c, d, e, f, g) \n\n 其中：\t a为整数表示圆心的X坐标，默认为100 \n\t b为整数表示圆心的Y坐标，默认为100 \n\t c为整数表示长半径长度，默认为100 \n\t d为整数表示短半径长度，默认为80 \n\t e为整数表示圆周厚度，默认为1 \n\t f为整数表示图像精度，默认为1(最高) \n\t g为字符串表示颜色，默认为蓝色 \n\t 整数的单位均为像素(px) \n\n 例如：\n\n SolidEllipse(100, 100, 60, 1, 1, "blue")');
return false;
} o = null;
var cx = parseInt(centreX<0 ? 100 : centreX);
var cy = parseInt(centreY<0 ? 100 : centreY);
var lr = parseInt(longRadii<2 ? 100 : longRadii);
var sr = parseInt(shortRadii<2 ? 80 : shortRadii);
var p = parseInt(precision<1 ? 1 : precision);
var c = color; var y;
for(var x=-lr; x<=lr; x+=p){
y = sr * Math.sqrt(Math.pow(lr, 2) - Math.pow(x, 2)) / lr;
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+p+'; height:'+parseInt(2*y)+'; position:absolute; top:'+parseInt(cy-y)+'; left:'+parseInt(cx+x)+';">');
} //alert("一共有 " + document.all.length + " 个 <img>");
}//空心方形
function HollowSquare(centreX, centreY, sWidth, sHeight, thickness, precision, color){ var o = document.createElement('<span style="color:' + color + ';"></span>');
if(isNaN(centreX) || isNaN(centreY) || isNaN(sWidth) || isNaN(sHeight) || isNaN(thickness) || isNaN(precision) || o.style.color == ""){
o = null;
alert(' 参数不正确，正确的参数格式为：HollowSquare(a，b，c, d, e, f, g) \n\n 其中：\t a为整数表示中心点的X坐标，默认为100 \n\t b为整数表示中心点的Y坐标，默认为100 \n\t c为整数表示方形的长，默认为100 \n\t d为整数表示方形的宽，默认为80 \n\t e为整数表示方形厚度，默认为1 \n\t f为整数表示图像精度，默认为1(最高) \n\t g为字符串表示颜色，默认为红色 \n\t 整数的单位均为像素(px) \n\n 例如：\n\n HllowSquare(100, 100, 100, 80, 1, 1, "red")');
return false;
} o = null;
var cx = parseInt(centreX<0 ? 100 : centreX);
var cy = parseInt(centreY<0 ? 100 : centreY);
var w = parseInt(sWidth<2 ? 100 : sWidth);
var h = parseInt(sHeight<2 ? 80 : sHeight);
var t = parseInt(thickness<1 ? 1 : thickness);
var p = parseInt(precision<1 ? 1 : precision);
var c = color;
if((w>=h?h:w) <= t){
SolidSquare(cx, cy, w, h, p, c);
return false;
} for(var x1=-w/2; x1<=w/2; x1+=p){
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+t+'; height:'+t+'; position:absolute; top:'+parseInt(cy-h/2)+'; left:'+parseInt(cx+x1)+';">');
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+t+'; height:'+t+'; position:absolute; top:'+parseInt(cy+h/2)+'; left:'+parseInt(cx+x1)+';">');
}
for(var y1=-h/2; y1<=h/2; y1+=p){
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+t+'; height:'+t+'; position:absolute; top:'+parseInt(cy+y1)+'; left:'+parseInt(cx-w/2)+';">');
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+t+'; height:'+t+'; position:absolute; top:'+parseInt(cy+y1)+'; left:'+parseInt(cx+w/2)+';">');
} //alert("一共有 " + document.all.length + " 个 <img>");
}//实心方形
function SolidSquare(centreX, centreY, sWidth, sHeight, precision, color){ var o = document.createElement('<span style="color:' + color + ';"></span>');
if(isNaN(centreX) || isNaN(centreY) || isNaN(sWidth) || isNaN(sHeight) || isNaN(precision) || o.style.color == ""){
o = null;
alert(' 参数不正确，正确的参数格式为：SolidSquare(a，b，c, d, e, f) \n\n 其中：\t a为整数表示中心点的X坐标，默认为100 \n\t b为整数表示中心点的Y坐标，默认为100 \n\t c为整数表示方形的长，默认为100 \n\t d为整数表示方形的宽，默认为80 \n\t e为整数表示图像精度，默认为1(最高) \n\t f为字符串表示颜色，默认为红色 \n\t 整数的单位均为像素(px) \n\n 例如：\n\n SolidSquare(100, 100, 100, 80, 1, 1, "red")');
return false;
} o = null;
var cx = parseInt(centreX<0 ? 100 : centreX);
var cy = parseInt(centreY<0 ? 100 : centreY);
var w = parseInt(sWidth<2 ? 100 : sWidth);
var h = parseInt(sHeight<2 ? 80 : sHeight);
var p = parseInt(precision<1 ? 1 : precision);
var c = color; for(var x=-w/2; x<=w/2; x+=p){
document.write('<img style="background:'+c+'; border:1 solid '+c+'; width:'+p+'; height:'+h+'; position:absolute; top:'+parseInt(cy-h/2)+'; left:'+parseInt(cx+x)+';">');
} //alert("一共有 " + document.all.length + " 个 <img>");
}HollowCircularity(100, 100, 80, 1, 1, "red");
HollowCircularity(300, 100, 80, 5, 2, "#12345F");
SolidCircularity(550, 100, 100, 1, "green");HollowEllipse(100, 300, 100, 80, 1, 1, "black");
HollowEllipse(350, 300, 100, 80, 5, 2, "#F54321");
SolidEllipse(600,300,80,60,1,"pink");HollowSquare(100,520,100,80,1,1,"blue");
HollowSquare(350,520,100,80,5,3,"#1F2534");
SolidSquare(550,520,200,120,1,"brown");
</script>
这个我在网上找的 .. 能解决你的问题吧..

去搜一下raphael.js这个吧，它主要实现js的矢量绘图功能，通过封装SVG/VML实现，功能强大
目前raphael.js已经与ExtJs合作，在ExtJs中好象是用来实现图表功能的

你的图形并不难，最简单的方法是用canvas，全浏览器兼容希望这个教程能够帮到你html5.jphttp://html5.jp/canvas/index.html

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>你自己搞一个输入框，把要的半径输入进去</title>
<script language="JavaScript" src="./js/jquery-1.5.js" type="text/javascript"></script>
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
</head><body>
<v:oval id="outer_oval" style="position:absolute" />
<v:oval id="inner_oval" style="position:absolute" />
<input type="button" value=" zoomout" onClick="btn_zoomout()" />
<input type="button" value=" zoomin" onClick="btn_zoomin()" />
<script language="javascript">
       function btn_zoomout()
   {
         outer_oval_radius -=1;
outer_oval_left  = x_zone - outer_oval_radius;
         outer_oval_top = y_zone - outer_oval_radius;
         outer_oval_width = 2*outer_oval_radius;
         outer_oval_height = 2*outer_oval_radius;
onDraw();
   }
   function btn_zoomin()
   {
          outer_oval_radius +=1;
outer_oval_left  = x_zone - outer_oval_radius;
         outer_oval_top = y_zone - outer_oval_radius;
         outer_oval_width = 2*outer_oval_radius;
         outer_oval_height = 2*outer_oval_radius;
onDraw();
   }
   function onDraw()
   {
          document.getElementById("outer_oval").style.left = outer_oval_left;
          document.getElementById("outer_oval").style.top = outer_oval_top;
          document.getElementById("outer_oval").style.width = outer_oval_width;
          document.getElementById("outer_oval").style.height = outer_oval_height;

         document.getElementById("inner_oval").style.left = inner_oval_left;
         document.getElementById("inner_oval").style.top = inner_oval_top;
         document.getElementById("inner_oval").style.width = inner_oval_width;
         document.getElementById("inner_oval").style.height = inner_oval_height;
   }
</script><script language="JavaScript">
      x_zone = 200;  //同心圆的圆点坐标
  y_zone = 200;

  outer_oval_radius = 100;  //外圈初始半径
  inner_oval_radius =  60;   //内圈初始半径

  outer_oval_left  = x_zone - outer_oval_radius;
  outer_oval_top = y_zone - outer_oval_radius;
  outer_oval_width = 2*outer_oval_radius;
  outer_oval_height = 2*outer_oval_radius;

  inner_oval_left  = x_zone - inner_oval_radius;
  inner_oval_top = y_zone - inner_oval_radius;
  inner_oval_width = 2*inner_oval_radius;
  inner_oval_height = 2*inner_oval_radius;

  onDraw();
</script></body>
</html>

其实这个图就是我用svg画得，但是当我用js控制操作这个svg图时，我发现达不到我想要的效果。本想通过局部放大使同心圆的外圆半径增加，结果这样一来，和内圆的外边界产生了间隙。
我这个图是模拟导线覆冰厚度增加的。所以到了这一步，我不知道svg该怎么继续了，是svg真不能满足？特来请教.

惭愧，我竟然不知道JS+VML画图

这年头不直接写出代码，就不会写的，不会研究的人太多了vml只有ie是支持的。canvas是全浏览器支持。包括ie6。

调试易

js 画图，100分汇报，通过立即结贴。

解决方案 »