参悟参悟，绘制一个属于你的五角星吧，结合之前知识点，完全可以绘制出一个标准的五角星
效果：
image.png
开始摩拳擦掌
屡屡想法
五角星有几个角？
五个角！
错啦~
十个角： 分为五个外角，五个内角找准角的坐标，将每个角都连接起来，那么五角星就出来了
我们可以先找外角(图上所示)
- 红色的线所呈现的夹角就是两个外角形成的夹角 360 / 5 = 72°
- 三点钟方向0 °~ 到外角起始角的度数 18 ° = 90° - 72 °
- 好滴，到这的话可以明白 从18° 开始 每加 72°就到下一个外角
那么内角同理：
黄色的结束角位于红色的夹角中间(角平分线上)，那么它的角度就为36° ，然后黄色的起始角~黄色的结束角则为 54° = 36°+ 18°
内角从54°开始，每加72°则会到下一个内角
先来个内外圆
ctx.beginPath();
// 外圆
ctx.arc(250, 250, 200, 0, 2 * Math.PI);
// 内圆
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
画星星的路径****
ctx.beginPath();
ctx.lineWidth = 4;
// 绘制星星路径
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 200 + 250, -Math.sin((18 + i * 72) / 180 * Math.PI) * 200 + 250);
ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 100 + 250, -Math.sin((54 + i * 72) / 180 * Math.PI) * 100 + 250);
}
ctx.closePath();
ctx.stroke();
下面不重要：
/ 原点
ctx.beginPath();
ctx.arc(250, 250, 5, 0, 2 * Math.PI, false);
ctx.fill();
ctx.font = '16px bold';
ctx.fillStyle = 'red';
// 大圆的夹角两条边
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.moveTo(250, 250);
// deg(度数) = 份 / 180 * Math.PI
// Math.cos(deg) 临边比斜边 ： X轴
// Math.sin(deg) 对边比斜边 ： Y轴
ctx.lineTo(Math.cos(18 / 180 * Math.PI) * 200 + 250, -Math.sin(18 / 180 * Math.PI) * 200 + 250);
ctx.fillText('起始角', Math.cos(18 / 180 * Math.PI) * 200 + 250, -Math.sin(18 / 180 * Math.PI) * 200 + 250);
ctx.moveTo(250, 250);
ctx.lineTo(Math.cos(90 / 180 * Math.PI) * 200 + 250, -Math.sin(90 / 180 * Math.PI) * 200 + 250);
ctx.fillText('结束角', Math.cos(90 / 180 * Math.PI) * 200 + 250, -Math.sin(90 / 180 * Math.PI) * 200 + 250);
ctx.stroke();
// 大圆的夹角
ctx.beginPath();
ctx.arc(250, 250, 20, -18 / 180 * Math.PI, -Math.PI / 2, true);
ctx.fillText('72°', 260, 230);
ctx.stroke();
// 0° 到 -18°
ctx.beginPath();
ctx.arc(250, 250, 40, -18 / 180 * Math.PI, 0);
ctx.fillText('18°', 300, 250);
ctx.stroke();
// 小圆
ctx.beginPath();
ctx.strokeStyle = 'orange';
ctx.fillStyle = 'orange';
// 小圆的角的两条边
ctx.moveTo(250, 250);
ctx.lineTo(Math.cos(54 / 180 * Math.PI) * 100 + 250, -Math.sin(54 / 180 * Math.PI) * 100 + 250);
ctx.fillText('结束角', Math.cos(54 / 180 * Math.PI) * 100 + 250, -Math.sin(54 / 180 * Math.PI) * 100 + 250);
ctx.moveTo(250, 250);
ctx.lineTo(350, 250);
ctx.fillText('起始角', 350, 250);
ctx.stroke();
// 小圆的角
ctx.beginPath();
ctx.arc(250, 250, 60, 0, -54 / 180 * Math.PI, true);
ctx.fillText('54°', 300, 210);
ctx.stroke();
canvas-绘制矩形及弧形