使用canvas来画正多边形和五角星

画这两个图形的核心就是计算出各个点的坐标，然后利用lineTo（）方法将各个点连接起来。

先在body里写入canvas标签

        
            浏览器不支持
        

然后，在JS中获取到画布，并获取绘制环境：

        var canvas = document.querySelector("#canvas");
        var ctx = canvas.getContext("2d");

首先，是正多边形的画法：

        var num = 5;
        var radius = 200;
        //此处以(250,250)为中心
        //画正多边形
        for (var i =0;i<=num;i++) {
            var x = radius*Math.cos(Math.PI/180*360/num*i)+250;
            var y = radius*Math.sin(Math.PI/180*360/num*i)+250;
            ctx.lineTo(x,y);
        }
        ctx.stroke();

然后，就是五角星的画法：

        ctx.beginPath();        
        for (var i=0;i <= num;i++) {
            var x = radius*Math.sin(Math.PI/180*360/num*i*2)+250;
            var y = radius*Math.cos(Math.PI/180*360/num*i*2)+250;
            ctx.lineTo(x,y);
        }
        ctx.fill();