夏天 夜晚的星空

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

夏天的一个晚上想起了，小时候抬头看星星时候场景，突发奇想我们今天就用canvas画一个夜晚的星空吧(可能会有一点儿童绘画风采)

我们首先要思考五角星是怎么绘制的，先给大家上一个五角星的截图

其实画五角星我们主要是用lineTo()来画，如果我们想要画一个五角星我们就需要知道五角星的10个点才能完成的画出来 我们可以想象一下可以把最外层的五个定点看成一个大圆，在里面的五个点看成一个小圆，

接下来大家可以看一下截图(需要和大家提一下canvas的y坐标是向下的)

红色圈 是需要知道的小圈的点的坐标 蓝色圈的是我们需要知道大圆点的坐标

在求相对应的点的时候，我们需要知道对应的角度和半径 利用三角函数sin cos的公式求得对应点的坐标 公式 sin对边比斜边，cos是邻边比斜边 sinA = 对边/斜边 cosB = 邻边/斜边

我们可以仔细的分析一下这个三角形是在正中间，5个大角，正好平分一个圆，也就是一个大角是72度 看截图 A点 坐标 x=cos(18)*R(R为大圆半径 ) y = -sin(18)*R B点 坐标 x= cos(54)*r(r为小圆半径) y = -sin(54)*r C点 坐标 x= cos(90)*R y = -sin(90)*r

代码 用 Math.cos需要角度转弧度

   // 大圆坐标 // 用math 需要角度转成弧度 大圆先设定300 400是平移 不然是聪 0，0点开始画 
        ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
        -Math.sin((18+i*72)/180*Math.PI)*200+200
           )
   // 小圆半径150  
   ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*200+200,
        -Math.sin((54+i*72)/180*Math.PI)*200+200
           )

用上面公式画的三角形画出的基准的⭐️

这是我完成的夏天夜晚星空的样子

这是我的代码块 供大家参考