canvas 闭合_想使用SVG或者canvas 手绘闭合多边形，使用vml效果已经实现了，由于vml只能支持ie所以想转成SVG或canvas...

引用

最近要实现一个功能，在一张图片上选好区域后，然后记录后选择的坐标。然后使用 map area 将所选区域显示出来。

我在网上找了一段vml的代码，能实现我的功能。

但是因为vml只支持ie，所以没有办法在 Chrome上用。

这个看了两天了，一直没有实现方法，请各位大神,能将代码改成 SVG或者canvas这种能支持Chrome浏览器的。

下面的代码是vml手绘闭合多边形的。

再次谢谢各位大神了。

手绘多边形

v\:* {behavior:url(#default#VML);}

var Working=false;//判断是否画图的状态

var poly1=null,oldvalue="",oldx=0,oldy=0 //为了完成铅笔、记忆点等连续线段

var xx,yy;

//鼠标单击事件

function divMousedown()

{

if(!Working)//第一次点击鼠标

{

xx=event.x;

yy=event.y;

poly1=div1.appendChild(document.createElement(""));

oldvalue=poly1.path.value.replace("e","");

oldx=xx;

oldy=yy;

Working=true;

}

else

{

if (poly1!=null) oldvalue=poly1.path.value.replace(" e","");

}

}

//鼠标移动的时候

function divMouseMove()

{

tempx=event.x;

tempy=event.y;

if (poly1!=null)

{

poly1.path.value=oldvalue+","+(tempx-oldx)+","+(tempy-oldy);

poly1.path.value=poly1.path.value.replace(",0,0,",",0,").replace(",0 e","e");

}

}

function divMouseUp()

{

if(event.button==2)

{

poly1.path.value=oldvalue+"x e";

Working=false;

poly1=null;

}

}

在页面上点击鼠标左键开始，右击鼠标右键结束