效果圖：
<body>
<canvas id="square" width="500"></canvas>
<canvas id="circle"></canvas>
<script type="text/javascript">
function polygon(c,n,x,y,r,angle,counterclockwise){
angle = angle || 0;
counterclockwise = counterclockwise ||false;
c.moveTo(x+r*Math.sin(angle), //從第一個頂點開始一條新的子路徑
y-r*Math.cos(angle)); //使用三角法計算位置
var delta = 2*Math.PI/n; //兩個頂點之間的夾角
for(var i=1 ; i < n ; i++){ //循環剩余的每個頂點
angle += counterclockwise ? -delta:delta; //調整角度
c.lineTo(x+r*Math.sin(angle), //以下個頂點為端點添加線段
y-r*Math.cos(angle));
}
c.closePath(); //將最后一個頂點和起點連接起來
}
var convas = document.getElementById('square');
var c=convas.getContext("2d");
//開始一個新的路徑並添加一條多邊形子路徑
c.beginPath();
polygon(c,3,50,70,50); //三角形
polygon(c,4,150,60,50,Math.PI/4); //正方形角形
polygon(c,5,255,55,50); //五角形
polygon(c,6,365,53,50,Math.PI/6); //六角形
polygon(c,4,365,53,20,Math.PI/4,true); //六邊形中的小正方形
//設置屬性來控制圖形外觀
c.fillStyle = "#ccc" ; //內部使用淺灰色
c.strokeStyle = "#008"; //深藍色外邊框
c.lineWidth =2; //2個像素寬
//調用如下函數繪制所有這些多邊形（每個分別定義在自己的子路徑中）
c.fill();
c.stroke();
</script>
</body>
