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>

let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')
canvas.width = 500
canvas.height = 500
ctx.save()
ctx.beginPath()
// 将坐标移动到画布中央
ctx.translate(canvas.width/2, canvas.height/2)
// 设置大圆、小圆半径
let R = 200
let r = 100
let x
let y
// 逆时针计算五角星外围10个点的坐标
for(let i = 0; i < 5; i++){
  // 外围凸出的每个点坐标
  x = Math.cos((18 + 72*i) / 180 * Math.PI) * R
  y = - Math.sin((18 + 72*i) / 180 * Math.PI) * R // canvas中y轴的正向方向与直角坐标系相反
  ctx.lineTo(x, y)
  // 外围凹下去的每个点坐标
  x = Math.cos((54 + 72*i) / 180 * Math.PI) * r
  y = - Math.sin((54 + 72*i) / 180 * Math.PI) * r // canvas中y轴的正向方向与直角坐标系相反
  ctx.lineTo(x, y)
}
ctx.closePath()
ctx.stroke()
ctx.restore()

最终效果：