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),大小由 widthheight 指定。

参数

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见