HTML 多边形的绘制

原始图片：（270*600）

html：

<div class="back" >
	<canvas id="map1" width="270px" height="600px">
	</canvas>
</div>

js：

function draw(id){
	var map=document.getElementById(id);
	var pan=map.getContext("2d");
	pan.beginPath();
//	pan.strokeStyle="rgba(99,20,50,0.7)";
	pan.fillStyle="rgba(17,14,14,0.7)";
	pan.moveTo(0,0);
	pan.lineTo(270,0);
	pan.lineTo(270,600);
	pan.lineTo(0,600);
	pan.closePath();
	pan.fill();
//	pan.stroke(); 绘制此路径
//	pan.clearRect(0,0,270,600);
}

处理后：