说在前面：当今世界各国的国旗尺寸并不是统一的，大体分2:3和1:2两种，我国采用2:3的比例。
正式开始之前，我们需要一个开发工具，那就是——http://jsbin.com/。
我们要画的第一张国旗是印尼国旗，因为它实在是太简单了，哈哈。通过搜索知道印尼国旗是红白两色组成的，比例为3:2，红色颜色值为rgb(199,4,30)，白色颜色值为rgb(255,255,255)。
首先我们在HTML区域加上画布的代码：
// 长为600，高为400，也就是3:2的比例
<canvas id="flag-canvas" class="flag-canvas" width="600" height="400"></canvas>
我们要让它成为真正的画布，所以我们要在JavaScript区域加上如下代码：
var canvas = document.querySelector("#flag-canvas");
var context = canvas.getContext("2d");
有了上面的代码，我们就可以正式的开始画了。其实就是画两块矩形，一块红色，一红白色。
var canvas = document.querySelector("#flag-canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(199,4,30)"; // 设置矩行的填充颜色
context.fillRect(0, 0, 600, 200); // 画矩形，前面两个0指的是画布坐标点，也就是从画布左上角，后面的600表示长，200表示高
context.fillStyle = "rgb(255,255,255)"; // 重置填充颜色，这次为白色
context.fillRect(0, 200, 600, 200); // 画白色矩形，坐标起点应该是红色矩形的左下角，矩形大小同样为600长，200高
因为页面的背景颜色为白色，为了能看清国旗的白色，可以设置一下网页的背景色，在css区域中加入：
body {
background-color: #ccc;
}
看看效果吧：
同理，我们可以画任何只有矩形的国旗，比如3横条的俄罗斯国旗，3竖条的法国国旗等。
