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

时间：2024-05-19 11:04:20

只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹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>

相关文章