我正在参加「初夏创意投稿大赛」详情请看:初夏创意投稿大赛
夏天的一个晚上想起了,小时候抬头看星星时候场景,突发奇想我们今天就用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
)
用上面公式画的三角形画出的基准的⭐️
这是我完成的夏天夜晚星空的样子
这是我的代码块 供大家参考