Canvas学习——画国旗（1）

说在前面：当今世界各国的国旗尺寸并不是统一的，大体分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竖条的法国国旗等。

查看效果