Ciao, la funzione createInput genera i campi in base al numero di vertici.
Spero vada bene.
codice:
<!DOCTYPE>
<html><head>
<style>
body { font:13px Arial; }
input { width:80px; padding:6px; margin:2px 8px 8px 0; }
</style>
<script>
var num;
_e=function(l){ return document.getElementById(l) }
isNum=function(n) { return (!isNaN(n) && !isNaN(parseFloat(n))) };
createInput=function(){
var r, n, s="";
num=parseInt(_e("id_n").value)||0;
if(!num || num<3) { alert("Numero vertici errato!"); return; }
// crea num campi di input
for(r=0; r<num; r++){
s+="x"+r+" <input id='id_x"+r+"' /><br>"+
"y"+r+" <input id='id_y"+r+"' /><br><br>";
}
s+="<button onclick='drawPoly()'>Disegna poligono</button>";
_e("id_wrap").innerHTML=s;
},
drawPoly=function(){
var r, c, x,y, p=[];
for(r=0; r<num; r++){
x=_e("id_x"+r).value;
y=_e("id_y"+r).value;
if(!isNum(x) || !isNum(y) ){ alert("inserire solo numeri!"); return; }
p[r*2]=+x;
p[r*2+1]=+y;
}
c=_e("id_cnv").getContext("2d");
c.strokeStyle="#A00";
c.clearRect(0,0,400,400);
c.beginPath();
c.moveTo(p[0], p[1]);
for(r=1; r<num; r++) c.lineTo(p[r*2], p[r*2+1]);
c.lineTo(p[0], p[1]);
c.closePath();
c.stroke();
}
</script>
</head>
<body>
N. <input id='id_n' value=3 />
<button onclick='createInput()'>Nuovo poligono</button>
<br><br>
<div id='id_wrap' style='width:240px;'></div>
<canvas id='id_cnv' style='position:absolute;left:200px;top:80px;border:1px solid #AAA;' width='400' height='400'></canvas>
</body>
</html>