教你用canvas画n角星星

首先我们要明白星星的结构，星星有很多种，五角星是最常用的一种星星，后面还有三角星六角星等等，但是只要是星星都是高度对称的，所以只要是星星结构的东西我们就能按照一定规则将其画出。

我们看一下一个n角星的构成，就从最简单的三角星开始，如下图

我们可以看出来一个三角形可以由两个圆包裹一个是外圆一个是内圆，
我们从一个角出发找其对称轴，将圆心和三角星接触的地方链接起来
如上图我们可以看见一个三角星一共有6个点和内圆外圆连接，每条连线之间的角度是360除以6，就是60度。
然后我们看五角星的，同样画五角星的内外圆与坐标原点的连线、这里我们可以清楚看到五角星被分割成了10份，也就是说每一分的角度是360除10 等于36.
这样我们是不是可以找出规律来了。
规律很简单假设n角星，那么他会被平分成2*n份，而每一个交点都是顶点，而且相邻顶点与圆心之间连线的角度是固定的，即使360/2/n，坐标轴怎么画呢，很简单我们只要将其一个顶点正对y轴，呈y轴对称图形即可
由此我们就可以看出来了，我们以y轴方向来看，每过一个固定角度就是一个顶点，两点成线，那么我们就可以画出一条边，只要我们将y轴旋转10次就能够画出一个完美的五角星，所以好办了。

然后就是每个顶点坐标的计算了，我们可以从下图来计算：

上图我们可以看出R就是圆d的半径，x的坐标就是Rcos ，y的坐标是Rsin
但是我们能看的出来第一象限和第二象限的对应的角是不一样的，第二象限的是补角，但是程序可不会认补角，我们想第二象限的角不为补角的話，我们应该将cos和sin变换一下，就变成x=R*sin，y=R(-cos)*,也就是说：

道理是这样的，但是我们聪明反被聪明误了，其实我们那角度应该这样算，x=Rsin(90+a) =Rcos(a) ,y=Rcos(90+a)=R（-sin(a)）。哈哈，是不是呢？相信很多人都不记得了吧，学好数学走遍天下都不怕。
那样我们就可以按照逆时针的顺序来画边，就是

这样简单易懂，我们只要找出上面的8个点就可以了（这是四角星，我偷懒没有画五角星），这8个点都是有规律的，大小大小圆点的排列，所以我们可以以2为周期循环，大小或者小大来循环画图，而由于大小点数目相等而且之和为偶数，所以不必担心会越界或者少边。
这时候我们就找到规律了就可以用机器代替我们工作了，

    drawStar(context,n, r1)//n角星  r1大圆半径
    {
      //获取固定角度的坐标
      let cor = 360 / n / 2 
      let rightAngle = 90 //y轴坐标为起点画图
      let r2 = r1 / 2
      context.translate(r1, r1) //将坐标原点弄到圆心
      context.moveTo(0,r1);//将画笔起始点移到y轴上的顶点
      context.beginPath();
      for (var i = 0; i <= n; i++) {
        // 画第一条边
        let x1 = r1 * Math.sin((rightAngle + 2 * i * cor) / 180 * Math.PI)
        let y1 =  r1 * Math.cos((rightAngle + 2 * i * cor) / 180 * Math.PI)
        //画第二条边
        let x2 = r2 * Math.sin((rightAngle + (2 * i + 1) * cor) / 180 * Math.PI)
        let y2 = r2 * Math.cos((rightAngle + (2 * i + 1) * cor) / 180 * Math.PI)

        context.lineTo(x1, y1)
        context.lineTo(x2, y2)
      }
      context.stroke();
      context.closePath();
      context.draw()
    }

	

看一下效果图