Canvas是HTML5提供的一个用于绘制图形的HTML元素，它使得Web开发人员能够在网页上创建动态交互式图像和动画。 Canvas元素的特点是在页面加载时加载，支持2D、3D的绘图，支持视频和音频操作，并且支持所有主流的浏览器。

在Canvas中，fillRect()函数可以用来在画布上绘制矩形。 填充一个矩形是最基本的绘图操作之一，fillRect()函数的语法如下：

```

context.fillRect(x, y, width, height);

```

其中，x和y表示矩形的左上角的坐标，width和height则表示矩形的宽度和高度。填充的颜色可以通过设置Canvas上下文的fillStyle属性定义。

下面，我们来看看如何使用fillRect()函数在Canvas上绘制矩形。

首先，我们需要在HTML文件中添加一个Canvas元素。在这个例子中，我们将创建一个300x300像素的Canvas元素：

```html

```

在这段代码中，我们设置了Canvas元素的宽度和高度，并且创建一个id为myCanvas的Canvas元素，将在之后的JavaScript代码中使用它来绘制矩形。

接下来，我们将在JavaScript文件中编写代码，该代码将获取Canvas元素的上下文，并使用fillRect()函数来将一个矩形绘制在Canvas上。

```javascript

// 获取Canvas元素以及上下文

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

// 绘制一个填充红色的矩形

ctx.fillStyle = 'red';

ctx.fillRect(10, 10, 100, 50);

// 绘制一个填充蓝色的矩形

ctx.fillStyle = 'blue';

ctx.fillRect(150, 10, 50, 100);

// 绘制一个填充绿色的矩形

ctx.fillStyle = 'green';

ctx.fillRect(50, 150, 200, 50);

```

在这段代码中，我们首先使用document.getElementById()方法来获取Canvas元素，并使用getContext('2d')方法获取Canvas上下文。接着，我们设置了一个颜色为红色的Canvas上下文fillStyle属性，并使用fillRect()函数将一个100x50像素的红色矩形绘制在Canvas的(10, 10)坐标位置。

接下来，我们设置了一个颜色为蓝色的Canvas上下文fillStyle属性，并使用fillRect()函数将一个50x100像素的蓝色矩形绘制在Canvas的(150, 10)坐标位置。

最后，我们设置了一个颜色为绿色的Canvas上下文fillStyle属性，并使用fillRect()函数将一个200x50像素的绿色矩形绘制在Canvas的(50, 150)坐标位置。

绘制完成后，Canvas上的图形将如下所示：


在实践中，fillRect()函数通常是结合其他函数一起使用的，比如strokeRect()函数可以用来绘制一个描边矩形，并且这个描边矩形可以和填充矩形结合起来创建更复杂的图形。

在本示例的HTML中，我们设置了一个边框样式，这个样式包括一个像素宽度的黑色实线框。可在此基础上实践各种Canvas图形的绘制，绘制曲线、直线、圆形等多种图形形状的方法和属性，尝试设计一些炫酷的动画效果，提升用户交互体验及页面的视觉效果，让你的网页更有趣味性和可玩性。