前言
要想实现国旗，核心就是要画五角星，我们一般画五角星是不是如下图所示，所以核心就是要找到五个点，将他们连接起来就是五角星了
而对于画图，web端的利器就是canvas，下面我们分析一下。对于下面这个没有旋转的五角星，我们以五角星中心为原点作一个坐标系，canvas是规定：向右向下是正方向。所以第一个点就是负的90度。又知道我们是隔一个点连接的，而且5个角刚好把一个圆分成5份，每一份就是360/5 = 72度。所以下一个点的度数是-90度+（72*2）
上面我们知道了每个点的角度问题，下面我们就要知道怎么计算每个点的长度问题，
x坐标：cx + Rcos(度) y坐标： cy + Rsin(度)
每个点都知道了我们就很好实现了
实现
（1）定义一个canvas
<canvas id="canvas-flag" width="500"></canvas>
(2) 定义一个画五角星的方法
// 画五角星的方法
//cx,cy 圆心坐标 radius半径 fillColor填充颜色 startAngle初始角度
function drawStar(context, cx, cy, radius, fillColor, startAngle) {
var pointer = startAngle == null ? - Math.PI / 2 : startAngle;
var angle = 2 * Math.PI / countSides;
context.beginPath();
// 因为是五角星，所以需要连接五个点
for (var i = 0; i < 5; i++) {
context.lineTo(cx + radius * Math.cos(pointer), cy + radius * Math.sin(pointer));
pointer += 2 * angle;
}
context.fillStyle = fillColor;
context.fill();
context.closePath(); }
（3）绘制国旗的除五角星部分
var COLOR_RED = "#de2910";
var COLOR_YELLOW = "#ffde00";
var canvas = document.getElementById("canvas-flag");
var context = canvas.getContext("2d");
var WIDTH = canvas.width;
var UNIT = WIDTH / 30;
var HEIGHT = canvas.height = UNIT * 20;
context.fillStyle = COLOR_RED;
context.fillRect(0, 0, WIDTH, HEIGHT);
(4)绘制五个五角星
drawStar(context, 5 * UNIT, 5 * UNIT, 3 * UNIT, COLOR_YELLOW,-Math.PI / 2);
drawStar(context, 10 * UNIT, 2 * UNIT, UNIT, COLOR_YELLOW, Math.PI- Math.PI/180*28);
drawStar(context, 12 * UNIT, 4 * UNIT, UNIT, COLOR_YELLOW, Math.PI- Math.PI/180*15);
drawStar(context, 12 * UNIT, 7 * UNIT, UNIT, COLOR_YELLOW, Math.PI+ Math.PI/180*15);
drawStar(context, 10 * UNIT, 9 * UNIT, UNIT, COLOR_YELLOW, Math.PI+ Math.PI/180*28);
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
