JavaScript:如何使用fillRect在画布上绘制多个矩形？

JavaScript中可以使用fillRect方法在画布上绘制多个矩形。fillRect方法是CanvasRenderingContext2D对象的一个方法，用于绘制填充的矩形。

下面是使用fillRect方法绘制多个矩形的步骤：

1. 获取画布元素：首先，需要获取到要绘制矩形的画布元素。可以使用document.getElementById方法或其他方式获取到画布元素。
2. 获取绘图上下文：通过调用画布元素的getContext方法，传入参数"2d"，可以获取到一个CanvasRenderingContext2D对象，该对象提供了绘制2D图形的方法和属性。
3. 设置矩形属性：在绘制矩形之前，可以通过设置CanvasRenderingContext2D对象的属性来定义矩形的样式，例如填充颜色、边框颜色、边框宽度等。
4. 绘制矩形：使用fillRect方法绘制矩形。fillRect方法接受四个参数，分别是矩形的左上角x坐标、左上角y坐标、矩形的宽度和高度。可以通过多次调用fillRect方法来绘制多个矩形。

下面是一个示例代码：

// 获取画布元素
var canvas = document.getElementById("myCanvas");

// 获取绘图上下文
var ctx = canvas.getContext("2d");

// 设置矩形属性
ctx.fillStyle = "red";

// 绘制矩形
ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(70, 10, 50, 50);
ctx.fillRect(130, 10, 50, 50);

在上面的示例中，首先获取了id为"myCanvas"的画布元素，然后通过getContext方法获取到了绘图上下文对象ctx。接下来，设置了矩形的填充颜色为红色，然后通过三次调用fillRect方法绘制了三个矩形，分别位于不同的位置。

这是一个简单的使用fillRect方法在画布上绘制多个矩形的示例。根据实际需求，可以通过调整参数和属性来实现更多样式的矩形绘制。