用线条绘制图形

1. 前言

本小节我们学习如何用线条绘制矩形和三角形。

2. 线条绘制矩形

绘制折线上一小节我们已经学过了，利用 moveTo、多个 lineTo、stroke 这三个方法就可以做到。本小节我们先用之前学过的内容绘制一个矩形。

先看整体案例，请在firefox浏览器中查看本案例。

如果你使用的是 firefox 浏览器，你会看到这样的效果：

chrome浏览器下的效果是这样的：

两个图一对比应该可以看出来，在firefox下，用上面代码绘制的矩形是有一定问题的，左上角会有一个明显的缺口，这是由于绘制的线条宽度超过了 1px，如果绘制 1px 宽的线条，则不会有这个问题。

既然上面代码绘制的矩形不是很完美，那有没有比这个更好的绘制方案呢？这就要用到我们今天学习的新方法 closePath()。

closePath() 方法用于创建从笔触当前点到开始点的路径。

先看整体案例，依然是在 firefox 浏览器下查看效果。

运行结果：

3. 线条绘制三角形

我们利用 closePath 再绘制一个三角形，先看整体案例。

运行结果：

可以看到左上角闭合地非常完美。

4. 路径方法整理

本小节中我们使用到一个新的方法。

4.1 closePath(x, y)

closePath() 方法主要作用是创建从笔触当前点到 moveTo 的点的路径，它的优势在于会自动处理接口闭合的问题。同学们可以用前面学过的知识绘制一个三角形，深刻体会一下 closePath() 的不同之处。

5. 总结

本小节我们学习了如何绘制矩形，还学习到了一个新的方法 closePath()，下一节我会带领大家学习直接使用绘制矩形函数去绘制图形。