3、使用 Canvas 绘制国旗形状

使用 Canvas 绘制国旗形状

1. 初步尝试与新方法学习

在进行绘图应用开发时，若直接运行程序，可能会发现线条混乱，结果不尽如人意。这是因为绘图时未明确告知画布何时开始和结束绘制。为解决此问题，可使用 beginPath 和 closePath 方法。例如，以下代码通过添加 beginPath 方法解决了国旗绘制的问题：

context.fillRect(0,0,lineHeight*5,lineHeight*5);
context.beginPath();
context.moveTo(0, lineHeight*2.5);
context.lineTo(lineHeight*5,lineHeight*2.5);
context.moveTo(lineHeight*2.5,0);
context.lineTo(lineHeight*2.5,lineHeight*5+1);
context.stroke();

通过上述操作，可成功创建两个国旗，并且能了解到 Canvas API 的工作原理，掌握这些知识后，能创建全球 196 个国旗中的 53 个，约占总数的 25%。目前能绘制的最复杂国旗是英国国旗，若有兴趣可尝试绘制并分享。

2. 使用路径创建形状

接下来，将使用路径创建更复杂的形状，从创建三角形开始。
- 创建三角形步骤 ：
1. 设置填充颜色： context.fillStyle