canvas绘制五角星

canvas绘制五角星

在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示：
这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。

当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为(R * cos(18°/180π)， R * sin(18°/180π)) 、A点的坐标为(R * cos(90°/180π), R * sin(90°/180π))、I点坐标为R * cos(162°/180π)，R * sin(162°/180π))、G点坐标为(R * cos(234°/180π)，R * sin(234°/180π))、E点坐标为(R * cos(306°/180π), R * sin(306°/180π))，因此C、A、I、G、E的坐标可以用(R * cos((18° + 72° * i)/180π), R * sin((18° + 72° * i)/180π))，i取0-4；

同理B、J、H、F、D的坐标可以用(r * cos((54° + 72° * i)/180π), r * sin((54° + 72° * i)/180π))，i取0-4；

但是在canvas坐标系中，y轴的正向朝下，因此在绘制时需将y坐标的值正负值取反。

代码实现如下：

<canvas id="canvas"></canvas>