fillrect（绘制矩形——fillRect()）

绘制矩形——fillRect()

HTML5提供了丰富的图形API，其中之一就是绘图API。在HTML5中，我们可以使用Canvas元素和绘图上下文来进行图形的绘制和处理。其中，fillRect()方法是绘制矩形的常用方法之一。

fillRect()方法可用于在Canvas上绘制一个填充矩形。通过指定矩形的左上角的坐标以及矩形的宽度和高度，我们可以绘制出所需要的矩形。

要使用fillRect()方法绘制矩形，我们首先需要在HTML文档中创建一个Canvas元素：

```html```

接下来，我们需要在JavaScript中获取到该Canvas元素，并获取到绘图上下文：

```javascriptvar canvas = document.getElementById(\"myCanvas\");var ctx = canvas.getContext(\"2d\");```

在获取到绘图上下文之后，我们就可以使用fillRect()方法来绘制矩形了。fillRect()方法的语法如下：

```javascriptctx.fillRect(x, y, width, height);```

其中，x和y代表矩形的左上角的坐标，width和height分别代表矩形的宽度和高度。例如，我们可以使用以下代码在Canvas上绘制一个填充红色的矩形：

```javascriptctx.fillRect(50, 50, 200, 100);```

上述代码将在Canvas上绘制一个左上角坐标为(50, 50)，宽度为200，高度为100的矩形。绘制出来的矩形将填充红色。

除了填充矩形，我们还可以使用clearRect()方法清除矩形区域，strokeRect()方法绘制矩形边框等。HTML5的绘图API提供了许多方法和属性，让我们能够轻松地在Canvas上进行图形的绘制和处理。

绘制矩形是绘图中的基本操作之一，掌握了fillRect()方法的使用，我们就可以在Canvas中绘制出各种需要的矩形，实现更为丰富多样的效果。无论是实现网页中的图形化元素，还是进行简单的动画效果，绘制矩形都是一个非常常见和重要的操作。

继续深入学习和理解HTML5的绘图API，对于我们进行图形化页面设计和开发将会大有裨益。希望本文的介绍能够帮助读者更好地掌握fillRect()方法的使用。