fillrect（使用 HTML 中的 fillRect 方法进行矩形绘制）

使用 HTML 中的 fillRect 方法进行矩形绘制

了解使用 fillRect 方法进行矩形绘制

1. fillRect 方法是什么

fillRect 方法是 CanvasRenderingContext2D 接口提供的一个方法，用于在画布上绘制一个矩形。该方法接受四个参数，分别是矩形左上角的 x 坐标、矩形左上角的 y 坐标、矩形的宽度和高度。下面是 fillRect 方法的语法。

``` void ctx.fillRect(x, y, width, height); ```

2. fillRect 方法的使用注意事项

在使用 fillRect 方法时，需要注意以下几点：

• 绘制的矩形位置和大小是相对于画布而言的，而不是相对于视口。
• 在调用 fillRect 方法前，需要先设置画布的填充颜色，否则默认的填充颜色为黑色。
• 在绘制矩形时，可使用 beginPath 方法和 closePath 方法来将矩形和其它图形区分开来，避免填充颜色相互干扰。

3. fillRect 方法的示例

下面是一个使用 fillRect 方法绘制矩形的示例代码：

``` var canvas = document.getElementById(\"myCanvas\"); var ctx = canvas.getContext(\"2d\"); // 设置画布填充颜色 ctx.fillStyle = \"red\"; // 绘制矩形 ctx.fillRect(10, 10, 100, 50); ```

效果如下图所示：

以上就是关于 fillRect 方法的介绍，希望对大家有所帮助。