java 画多边形_javascript绘制一个多边形

我想用纯Javascript语言通过鼠标处理程序在画布上绘制很多多边形 . 我的项目是here . 在我的项目中：

我想完成绘制并在双击时创建一个多边形 . (我可以) . 通过一次单击事件开始绘制以创建新多边形 . (我不能) .

当我开始新的绘制时，在制作前向多边形添加新点 . 谢谢 .

我的html文件在这里：

Orhan ALTIN

canvas{

border: 5px solid;

border-color: rgb(255,173,50);

}

var tuval = document.getElementById("tuval");

var kaynak = tuval.getContext("2d");

var simdiX=[];

var simdiY=[];

var sonraX=[];

var sonraY=[];

var cizgiler=[];

var cizgi={

x1:0,

y1:0

};

var bas=0;

var fare={

xx:0,

yy:0

};

var cevre=tuval.getBoundingClientRect();

var cizimyap=false;

var yeni=0;

tuval.addEventListener("click",function temizle(olay){

cizimyap=true;

fare={

xx:olay.clientX-cevre.left,

yy:olay.clientY-cevre.top

};

cizgi.x1=fare.xx;

cizgi.y1=fare.yy;

bas=bas+1;

kaynak.moveTo(fare.xx,fare.yy);

bas++;

if(bas>1){

cizgiler.push({

xx1:cizgi.x1,

yy1:cizgi.y1,

xx2:cizgi.x2,

yy2:cizgi.y2

});

}

tuval.addEventListener("mousemove", function oynat(olay){

if (cizimyap) {

kaynak.clearRect(0,0,tuval.width,tuval.height);

kaynak.beginPath();

for (var i = 0, max = cizgiler.length; i < max; i++) {

var dizi=cizgiler[i];

kaynak.moveTo(dizi.xx2,dizi.yy2);

kaynak.lineTo(dizi.xx1,dizi.yy1);

kaynak.stroke();

simdiX.push(dizi.xx1);

simdiY.push(dizi.yy1);

}

kaynak.moveTo(fare.xx,fare.yy);

kaynak.lineTo(olay.clientX-cevre.left,olay.clientY-cevre.top);

kaynak.stroke();

}

});

tuval.addEventListener("dblclick", function(){

cizimyap=false;

poligonYap(olay);

});

});

function poligonYap(olay){

simdiX.splice(simdiX.length-1,1,simdiX[0]);

simdiY.splice(simdiY.length-1,1,simdiY[0]);

kaynak.clearRect(0,0,tuval.width,tuval.height);

for (var i = 0, max = cizgiler.length; i < max; i++) {

//var dizi=cizgiler[i];

kaynak.strokeStyle="green";

kaynak.lineWidth="1";

kaynak.lineCap="round";

sonraX[i]=simdiX[i];

sonraY[i]=simdiY[i];

kaynak.lineTo(sonraX[i],sonraY[i]);

kaynak.stroke();

}

for (var i = 0, max = cizgiler.length-1; i < max; i++) {

kaynak.fillStyle="blue";

kaynak.fillRect(cizgiler[i].xx1-5/2,cizgiler[i].yy1-5/2,5,5);

kaynak.font="12px Tahoma";

kaynak.fillStyle="red";

kaynak.fillText(i+1,cizgiler[i].xx1,cizgiler[i].yy1-5);

}

}