一个给力的html5 画多边形的例子

只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！

代码奉上

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>画图</title>
</head>

<body>
  <canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var context =  myCanvas.getContext("2d");
        function drawPath(x, y, n, r)
        {
                var i,ang;
                ang = Math.PI*2/n //旋转的角度
                context.save();//保存状态
                context.fillStyle ='rgba(255,0,0,.3)';//填充红色，半透明
                context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
                context.lineWidth = 1;//设置线宽
                context.translate(x, y);//原点移到x,y处，即要画的多边形中心
                context.moveTo(0, -r);//据中心r距离处画点
                context.beginPath();
                for(i = 0;i < n; i ++)
                {
                        context.rotate(ang)//旋转
                        context.lineTo(0, -r);//据中心r距离处连线
                }
                context.closePath();
                context.stroke();
                context.fill();
                context.restore();//返回原始状态
        }
        drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形
        drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形
        drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形
        drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形
        drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形
        drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形
</script>
</body>
</html>

 

posted @ 2014-09-19 10:37  djdliu  阅读(4488)  评论(0)  编辑  收藏  举报