用变量的方式绘制一个五角星艏先求五角星十个顶点的坐标。

可以把每个五角星看成外顶点用一个大圆绘制内顶点用小圆绘制。在坐标系（0deg）下根据每个顶点的角喥和圆的半径求得x,y。

而每个大顶点相差72deg(180/5),每个小顶点也差72deg.所以下一个顶点的度数就是当前点加上72deg.(逆时针)

 代码实现画一个五角星

然而上面代码并不符合软件工程的设计原则，一个函数包含了很多功能（绘制星星和位移旋转角度都放在一个方法里）。当需求发生变化时例如将五角星变成圆或多边形,就需要重新修改整个方法。在图形学中任何的图形学都使用先绘制基本轮廓再根据需求进行图形变换也就是说一个方法绘制原始图形的路径，一个方法对图形进行变换（位移角度，大小...） , 用户也可以直接传一个图形的路径或方法根据路径进行绘制。

注意：以上两个方法平移旋转的是坐標系，而非元素因此，实际开发的时候平移或旋转完毕，需要将坐标系再还原使用save(),restore().

• context.scale(x, y);用来缩放Canvas画布的坐标系，只是影响坐标系之后嘚绘制会受此方法影响，但之前已经绘制好的效果不会有任何变化因此下面代码虽然起始点一样，但是由于坐标系被放大使得放大后嘚图形起始点改变。如果设置lineWidth也会放大。使用时要注意

最外面的弧用半圆进行绘制里面的弧使用画弧的arcTo()方法，传入的参数为：控制点终止点，半径

起始点，控制点终止点这些都是根据不同的需求位置可变，所以我们需要根据可以可变的点求出同样可变的半径以AOC為角，因为tan = 对边 / 邻边所以根据下面的公式可以求出半径。

AC和AH的长度很好求而AC的长度只需要使用两点间距离公式 

具体代码，还是使用先繪制原始路径在进行变换。

变换函数drawMoon传入的参数d代表arcTo的控制点的横坐标

 最后就可以结合上面的星星月亮来绘制下面的一幅图