用canvas画星星

最近在看MDN上关于canvas的讲解，对于里面的一个画星星的例子看了好久才明白，主要是里面的一些逻辑计算问题，特别在此记录下心得，如有不对的地方，欢迎指正！

HTML

 

 

JS 

获取canvas上下文

 

 

 开始画星星

 

 画星星核心函数

 

 这里讲一下为什么每次rotate弧度为Math.PI / 5

请看下图

 

 （美术功底不好，大家凑合看）

五角星一共十个点，图中标出了画每个点时x坐标轴的位置，从图中可以看到，这10个点的x轴一共把2 * Math.PI分成了10份，所以每份占2 * Math.PI / 10，即Math.PI / 5