CanvasRenderingContext2D：fillRect() 方法

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用： 2015 年 7 月.

Canvas 2D API 的 CanvasRenderingContext2D.fillRect() 方法绘制一个矩形，该矩形根据当前的 fillStyle 进行填充。

此方法直接绘制到画布上，而不会修改当前路径，因此任何随后的 fill() 或 stroke() 调用都不会对其产生影响。

语法

js
fillRect(x, y, width, height)

fillRect() 方法绘制一个填充的矩形，其起点位于 (x, y)，其大小由 width 和 height 指定。填充样式由当前的 fillStyle 属性确定。

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

矩形的宽度。正值向右，负值向左。

height

矩形的高度。正值向下，负值向上。

返回值

无（undefined）。

示例

一个简单的填充矩形

此示例使用 fillRect() 方法绘制一个填充的绿色矩形。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

矩形的左上角位于 (20, 10)。它的宽度为 150，高度为 100。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 10, 150, 100);

结果

填充整个画布

此代码片段使用矩形填充整个画布。这通常用于创建背景，然后可以在其上绘制其他内容。为了实现这一点，矩形的尺寸设置为等于 <canvas> 元素的 width 和 height 属性。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);

规范

规范
HTML 标准
# dom-context-2d-fillrect-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅