此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
Canvas 2D API 的 CanvasRenderingContext2D.rect() 方法将一个矩形添加到当前路径中。
与其他修改当前路径的方法一样,这个方法不会直接渲染任何内容。要在画布上绘制矩形,你可以使用 fill() 或 stroke() 方法。
备注:
要在一个步骤中创建并渲染矩形,可以使用 fillRect() 或 strokeRect() 方法。
语法
js
rect(x, y, width, height)
rect() 方法创建一个矩形路径,其起始点位于 (x, 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 |
浏览器兼容性
Loading...