canvas 实现规则多边形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <canvas id="mycanvas" width="1000" height="1000"></canvas>
</head>
<body>
</body>
<script>
    var c = document.getElementById('mycanvas');
    var ctx = c.getContext("2d");
    /*直接画三角形*/
    var deg = Math.PI*2/360;

    /*function trans(c,x,y,r) {
        c.translate(x,y);
        c.moveTo(0,0);
        c.lineTo(r,0);
        c.rotate(-60*deg);
        c.lineTo(r,0);
        //c.closePath();
        c.strokeStyle = "blue";
        c.stroke();

        //c.fillStyle = "#333";
        //c.fill();
    }*/
  //trans(ctx,300,300,150);


//这个函数就是画多个规则多边形
    function polygon(c,n,x,y,r,angle) {
        //debugger;
       angle = angle || 0;
        //counterclockwise = counterclockwise ||false;
        c.translate(x,y);    //把中心点移到(0,0)
        c.moveTo(0,0);
        var delta = 2*Math.PI/n;   //外角的度数 
        for(var i=0;i<n-1;i++){
            c.lineTo(r,0);        //首先画一条水平直线
            c.translate(r,0);     //平移坐标
            angle = -delta;
            c.rotate(angle);     //旋转坐标
        }
        c.closePath();
        c.fillStyle='#333';
        c.stroke();
        c.fill();
    }
    //ctx.beginPath();
    polygon(ctx,3,500,500,100);

    polygon(ctx,4,500,500,100);


</script>
</html>