小白学canvas-绘制正多边形、五角星

绘制正多边形

第一种方法就是发挥强大的数学能力，计算出各个顶点的位置，然后moveTo()，lineTo()。
第二种就是抄抄大神写的正多边形函数

function createPolygon(cxt,n,dx,dy,size){
            cxt.beginPath();
            var degree=(2*Math.PI)/n;
            for (var i=0;i

creatPolygon(cxt,n,dx,dy,size)，n为边数，(dx,dy)为多边形中心点位置，size为中心点到顶点的距离。然后调用creatPolygon()方法

图片.png

关于closePath()

如果画布的子路径是打开的，closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
如果子路径已经闭合了，这个方法不做任何事情。
一旦子路径闭合，就不能再为其添加更多的直线或曲线了。要继续向该路径添加，需要通过调用 moveTo() 开始一条新的子路径。

正五边形（￣Ｑ￣）╯

绘制五角星

先获取顶点坐标，然后连接起来。

亮闪闪的五角星★´∀｀★