canvas ：五角星的代码实现

对于五角星的canvas画布绘制，很好奇，抱着这种心情进行了小尝试，并发现了挺有意思的规律。

本人实现的五角星形状是：

其实五角星形状挺好实现的，找到规律进行容易。其逻辑为：

       有外圈和内圈之分，看起点是在内圈还是外圈，如果在外圈那么奇数点就在外圈，偶数点在内圈。图中的起点在外圈，那么进行绘制图形的时候，是由点与点之间画线绘制的，按照顺序1,2,3,4......在画布上描点(内圈点，外圈点通过奇偶性就可以判断出来)，之后再去连线即可。

       五角星的形状，可以有外圈半径和内圈半径的比例控制的，本人绘制的五角星是 外圈半径R / 内圈半径r = 2 / 1，相对没有那么锋利。

       如果R/r > 2/1 ,内圈圆会变小，往里缩，调试中就会看到 五角星的线是在统一水平线上，如下图片，第一张， 如果圈圈半径继续小，五角星会越来越瘦，就会变成下图第二章的情况。

    

     如果R/r < 2/1， 内圈圆继续变大，五角星会越来越肥胖，如下图

    

     如果R/r = 1， 内圈圆半径与外圈圆半径相等，五角星会变成等十边形，如下图

     如果R/r < 1， 内圈圆半径大于外圈圆半径，这种情况下，外圈圆变为内圈圆，内圈圆成为外圈圆了，即五角星的凸角和凹角会发生替换，变成了倒五角星，如下图

代码实现过程中，注意三角函数的值为弧度，需要通过  2 * Math.PI / 360 * a  进行转换，其中a为角度，下面代码的实现是R/r = 2/1的情况

// 准备工作
var angle = document.getElementById('angle')
var ctx = angle.getContext('2d')

... ...

// 实现
let R = rand(27, 30)
let r = R / 2
let a = 0 // 角度

// thisX, thisY控制五角星的起始位置，可以将他与鼠标位置进行绑定，五角星就行跟着鼠标走

ctx.beginPath()
for (let i = 0; i < 10; i++) {
   let b = 2 * Math.PI / 360 * a // 转换为弧度
   let x, y
   if (i % 2 === 1) {
       x = thisX + r * Math.sin(b)
       y = thisY - r * Math.cos(b)
   } else {
       x = thisX + R * Math.sin(b)
       y = thisY - R * Math.cos(b)
   }
   ctx.lineTo(x, y)
   a += 36;
}
ctx.closePath()
ctx.fillStyle = "#f5ed06"
ctx.fill();

// 代码实现，并不是全部源码，在源码的基础上更改了小版的，只侧重于其逻辑实现