在 JavaScript 中创建一个矩形

我们可以借助 JavaScript Canvas 矩形 来创建一个矩形。我们知道矩形是通过宽度和高度绘制的，在本篇文章中，我们将使用这些参数来绘制矩形。

在 Canvas 上绘制矩形的三种最常见的方法是：

1. rect() 方法
2. fillRect() 方法
3. strokeRect() 方法

rect() 方法

rect() 方法用于定义矩形。

我们可以使用 rect(x, y, width, height) 方法定义矩形左上角的坐标。我们还可以定义矩形的宽度和高度。

语法

rect() 方法的参数如下：

x： 矩形左上角的 x 坐标。

y： 矩形左上角的 y 坐标。

width： 矩形的宽度，以像素为单位。

height： 矩形的高度，以像素为单位。

演示：此演示使用 Rect() 在 Canvas 上定义矩形。

我们将从 (20, 20) 位置 开始，并使用 rect() 定义一个 140*90 像素 的矩形。然后使用 stroke() 实际绘制矩形。

代码

输出

fillRect() 方法

我们使用 fillRect() 方法绘制一个填充矩形。fillStyle 属性用于定义颜色。

fillStyle 属性指定 填充颜色。 如果没有 fillStyle 属性，则填充颜色默认为黑色。

语法

参数

x： 在 fillRect() 方法中，x 坐标是矩形左上角参数之一。

y： 在 fillRect() 方法中，y 坐标是矩形左上角参数之一。

width： 矩形的宽度以像素为单位。

height： 矩形的高度以像素为单位。

演示 1：此演示使用 fillRect() 在 Canvas 上显示矩形。

使用 fillRect() 绘制一个 140x90 像素的填充矩形，起始位置为 (8, 8)。

代码

输出

演示 2

我们将使用 fillStyle 属性设置填充颜色。

代码

输出

strokeRect() 方法

使用 strokeRect() 函数绘制描边（轮廓）矩形。strokeStyle 属性用于定义描边的颜色，描边的默认颜色为黑色。

语法

参数

x： 在 strokeRect() 方法中，x 坐标是矩形左上角参数之一。

y： 在 strokeRect() 方法中，y 坐标是矩形左上角参数之一。

width： 以像素为单位。

height： 以像素为单位。

linewidth： 显示描边的粗细。

strokeStyle 属性指定 描边颜色。 如果 strokeStyle 属性留空，则 默认描边颜色为黑色。

演示 1

我们将使用 strokeRect() 绘制一个 140x90 像素的描边矩形，起始位置为 (8, 8)。

代码

输出

演示 2

我们将使用 strokeStyle 属性来更改轮廓的颜色。

代码

输出

附加演示

我们可以使用 rect() 方法创建三个矩形。

代码

输出

结论

我们从本文中理解了以下几点：

1. 在 Canvas 上绘制矩形的方法类型。
2. 我们还了解到 rect() 方法仅定义矩形：它不会绘制它。因此，我们需要使用 stroke() 或 fill() 方法来绘制它。
3. fillRect() 方法有一个 fillStyle 属性，用于定义颜色。
4. strokeRect() 函数用于描边或绘制矩形的轮廓。strokeStyle 属性用于定义描边颜色。