上一篇画国旗我们画了很简单的印尼国旗——由两块矩形组成。这次同样是很简单的日本国旗。想必大家都很熟悉,日本国旗就是白色旗上画一个红色圆圈。
那么这次就要画一个白色矩形填满整个画布,然后在其上面画一个红色圆圈。那么这篇的重点就是如何画一个圆。
同样准备一个600*400大小的画布,为了使白色显眼,设置背景色为深灰吧:
// HTML
<canvas id="flag-canvas" width="600" height="400"></canvas>
// CSS
body {
background-color: #333;
}
// JavaScript
var canvas = document.querySelector("#flag-canvas");
var context = canvas.getContext("2d");
接下来画白色矩形填满画布,很简单的:
context.fillStyle = "#fff";
context.fillRect(0, 0, 600, 400);
最后画红色圆圈。这里圆圈大小我没有考究,画一个差不多大小的。颜色值为rgb(183, 0, 30)。注意画圆其实是画一个封闭的路径,然后再用颜色进行填充:
context.beginPath(); // 开始路径
context.fillStyle = "rgb(183,0,30)"; // 设置填充颜色
context.arc(300, 200, 100, 0, 2*Math.PI, false);
// 这个方法就是画弧形、曲线(不一定是要封闭),前两个参数为坐标原点,
// 第3个为半径,接下来两个参数是起始角度和结束角度
// 最后一个是可选参数,表是否为逆时针画,对于圆来说可以不设置。
context.fill(); // 关键一步是要将颜色填充上去