CanvasRenderingContext2D：rect() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.rect() 方法将一个矩形添加到当前路径中。

与其他修改当前路径的方法一样，这个方法不会直接渲染任何内容。要在画布上绘制矩形，你可以使用 fill() 或 stroke() 方法。

备注： 要在一个步骤中创建并渲染矩形，可以使用 fillRect() 或 strokeRect() 方法。

语法

js
rect(x, y, width, height)

rect() 方法创建一个矩形路径，其起始点位于 (x, y)，大小由 width 和 height 指定。

参数

x

矩形起始点的 x 轴坐标。

y

矩形起始点的 y 轴坐标。

width

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

height

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

返回值

无（undefined）。

示例

绘制矩形

此示例使用 rect() 方法创建了一个矩形路径，然后使用 fill() 方法进行渲染。

HTML

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

JavaScript

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

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始一个新路径
ctx.rect(10, 20, 150, 100); // 将一个矩形添加到当前路径中
ctx.fill(); // 渲染路径

规范

Specification
HTML
# dom-context-2d-rect-dev

浏览器兼容性

参见