canvas效果案例：五角星

参悟参悟，绘制一个属于你的五角星吧，结合之前知识点，完全可以绘制出一个标准的五角星
效果：

image.png

开始摩拳擦掌

屡屡想法

1. 五角星有几个角？
   五个角！
   错啦~
   十个角： 分为五个外角，五个内角

2. 找准角的坐标，将每个角都连接起来，那么五角星就出来了

我们可以先找外角(图上所示)

1. 红色的线所呈现的夹角就是两个外角形成的夹角 360 / 5 = 72°
2. 三点钟方向0 °~ 到外角起始角的度数 18 ° = 90° - 72 °
3. 好滴，到这的话可以明白 从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-绘制矩形及弧形