如何用JAVASCRIPT在HTML中画多边形

<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<BODY style="margin:0;padding:0;"> <span id='sss' style='position:absolute;top:0;left:0;'> </span>
<span id='aaa' style='position:absolute;top:0;left:500;'> </span>
 
<v:PolyLine id='thePolygonA' CoordOrig="0,0" filled='true' Points='97,88,70,96,16,83,66,6,97,88' style='position:absolute;top:0;left:0;' fillcolor='red' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() /> 
<v:PolyLine id='thePolygonB' CoordOrig="0,0" filled='true' Points='109,260,207,112,246,101,230,297,109,260' style='position:absolute;top:0;left:0;' fillcolor='blue' onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp() /> <script  LANGUAGE="javaScript">
 
 
var  PolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var  PolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) ); //用来计算的临时数组，由于数组是引用类型，所以不能克隆，只能另外准备一个。
var  tempPolygonA=new Array(new Array(97,88),new Array(70,96),new Array(16,83),new Array(66,6),new Array(97,88));
var  tempPolygonB=new Array(new Array(109,260),new Array(207,112),new Array(246,101),new Array(230,297),new Array(109,260) );  
var Obj
 function MouseDown(obj){
Obj=obj;
Obj.setCapture();
Obj.l=event.x-Obj.style.pixelLeft;
Obj.t=event.y-Obj.style.pixelTop; 
 
}
 
function MouseMove(){if(Obj!=null)
{
offsetx=parseInt(event.x-Obj.l);
offsety=parseInt(event.y-Obj.t);
Obj.style.left = offsetx;
Obj.style.top = offsety;if(Obj.id=="thePolygonA")
{ 
for(var i=0;i<PolygonA.length;i++)
{ 
tempPolygonA[i][0]=PolygonA[i][0]+offsetx;
tempPolygonA[i][1]=PolygonA[i][1]+offsety; 
}
}
if(Obj.id=="thePolygonB")
{
for(var j=0;j<PolygonB.length;j++)
{ 
tempPolygonB[j][0]=PolygonB[j][0]+offsetx;
tempPolygonB[j][1]=PolygonB[j][1]+offsety; 
}
}
 sss.innerHTML= tempPolygonA + "<br/>" + tempPolygonB+ "<br/>" +isCollapse(tempPolygonA,tempPolygonB) 
 
}
}
 
function MouseUp(){
if(Obj!=null){
Obj.releaseCapture();
Obj=null
}
}
 //alert(isPointInPolygon(222,243,PolygonB))
function isPointInLine(x,y,x1,y1,x2,y2)
{
//是否一个点向x轴的射线穿透线段,有交点
var maxY=(y1>=y2)?y1:y2;
var minY=(y1<=y2)?y1:y2;
var re=false;
if(y<=maxY && y>=minY)
{
if(x<= ( x1+(x2-x1)*(y-y1)/(y2-y1) ) )
{
re=true;
}
}
return(re);
 
}
 //109,260,207,112,246,101,230,297,109,260
function isPointInPolygon(x,y,Polygon)
{//是否点在多边形里 
 var crossNum=0;
 var re=true;
 for(var i=0;i<Polygon.length-1;i++)
 {
if(isPointInLine(x,y,Polygon[i][0],Polygon[i][1],Polygon[i+1][0],Polygon[i+1][1]))
{
crossNum++;
}
 } if((crossNum % 2)==0)
{
re=false;
 }
 return(re);
}function isCollapse(P1,P2)
{
//是否多边形碰撞。
aaa.innerHTML="";
var re=false;
for(var i=0;i<P1.length-1;i++)
{
if(isPointInPolygon(P1[i][0],P1[i][1] ,P2))
{
aaa.innerHTML="碰撞点为：" + P1[i][0] + " " + P1[i][1]
return(true);
}
}
for(var j=0;j<P2.length-1;j++)
{if(isPointInPolygon(P2[j][0],P2[j][1] ,P1))
{
 aaa.innerHTML="碰撞点为：" + P2[j][0] + " " + P2[j][1]
return(true); 
}
}
return(re);
}</script>
 
 
</BODY>
</HTML>以上是别人写的，你参考吧