绘制矩形

1. 前言

本小节我们将学习矩形的两种绘制方法。

绘制矩形在 canvas 中是常用的方法，所以 canvas API 直接提供了一个封装好的绘制矩形的方法 rect()，这个方法接收4个参数 x，y，width，height。

先看整体案例：

运行结果：

我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和上节课的绘制案例比较，我们省去了连每一个点的步骤。这里需要注意 rect 方法只是帮我们绘制了路径，并不会把路径实际地显示到画布上，我们依然需要调用 stroke 描边方法才能看到绘制的图形。

canvas API 还提供了一个直接绘制矩形的方法 strokeRect()，这个方法调用和 rect 方法一样，也是接收4个参数。

特别说明：利用 strokeRect 方法绘制的矩形独立于其他路径，后续对路径的操作不会影响到 strokeRect 绘制的矩形。

先看整体案例：

运行结果：

我们从案例中可以看到，绘制一个矩形路径只需要调用一个函数即可，和 rect 方法比较，这里我们没有调用 stroke 方法了。

本小节中我们使用到两个新的方法，分别是 rect 和 strokeRect。

rect 方法作用是绘制一个起点在 (x, y) 、宽度为 width、高度为 height 的矩形路径，它有四个参数变量 x，y，width，height。

变量说明：

strokeRect 是使用设定的绘画样式，描绘一个起点在 (x, y) 、宽度为 w、高度为 h 的矩形的方法，它直接绘制一个矩形，而不是一个路径，它有四个参数变量 x，y，width，height。

变量说明：

本小节我们主要学习了利用 rect 和 strokeRect 方法绘制矩形。到目前为止我们已经学习了三种绘制矩形的方法，矩形在 canvas 中是最常用的一种绘制形状，希望同学们认真学习。我们下一节将会讲解如何去填充一个路径。